基于js的变量提升和函数提升(详解)


Posted in Javascript onSeptember 17, 2017

一、变量提升

在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。

上个简历的例子如:

console.log(global); // undefined
var global = 'global';
console.log(global); // global

function fn () {
console.log(a); // undefined
var a = 'aaa';
console.log(a); // aaa
}
fn();

之所以会是以上的打印结果,是由于js的变量提升,实际上上面的代码是按照以下来执行的:

var global; // 变量提升,全局作用域范围内,此时只是声明,并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global); // 打印出global

function fn () {
var a; // 变量提升,函数作用域范围内
console.log(a);
a = 'aaa';
console.log(a);
}
fn();

二、函数提升

js中创建函数有两种方式:函数声明式和函数字面量式。只有函数声明才存在函数提升!如:

console.log(f1); // function f1() {}  
console.log(f2); // undefined 
function f1() {}
var f2 = function() {}

只所以会有以上的打印结果,是由于js中的函数提升导致代码实际上是按照以下来执行的:

function f1() {} // 函数提升,整个代码块提升到文件的最开始<br>console.log(f1);  
console.log(f2);  
var f2 = function() {}

结语:基本上就是这样,要熟练掌握的话可以多做些练习,test:

console.log(f1()); 
console.log(f2);  
function f1() {console.log('aa')}
var f2 = function() {}
(function() {
console.log(a);
a = 'aaa';
var a = 'bbb';
console.log(a);
})();

以上这篇基于js的变量提升和函数提升(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
利用express启动一个server服务的方法
Sep 17 #Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 #Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 #Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 #Javascript
JS分页的实现(同步与异步)
Sep 16 #Javascript
AngularJs 延时器、计时器实例代码
Sep 16 #Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 #Javascript
You might like
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
PHP脚本的10个技巧(4)
2006/10/09 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
JS 控制CSS样式表
2009/08/20 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python全局变量操作详解
2015/04/14 Python
python获取本机外网ip的方法
2015/04/15 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
毕业设计计划书
2014/01/09 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
2015年母亲节寄语
2015/03/23 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android