1. 变量提升
ES6之前我们一般使用var来声明变量,提升简单来说就是把我们所写的类似于var a = 123;这样的代码,声明提升到它所在作用域的顶端去执行,到我们代码所在的位置来赋值。
function test () {
console.log(a); //undefined
var a = 123;
};
test();
上述代码a的结果是undefined,它的实际执行顺序如下:
function test () {
var a;
console.log(a);
a = 123;
}
test();
再看一个:
a = 1;
var a;
console.log(a); //1
第一眼看到的时候是不是会认为undefined, 记住声明会提升到作用域顶端。
下面来看一道经典面试题:
console.log(v1);
var v1 = 100;
function foo() {
console.log(v1);
var v1 = 200;
console.log(v1);
}
foo();
console.log(v1);
输出的结果:
//undefined //undefined //200 //100
2. 函数提升
javascript中不仅仅是变量声明有提升的现象,函数的声明也是一样;具名函数的声明有两种方式:
1. 函数声明式 2. 函数字面量式
//函数声明式
function bar () {}
//函数字面量式
var foo = function () {}
函数字面量式的声明合变量提升的结果是一样的,函数只是一个具体的值;
但是函数声明式的提升现象和变量提升略有不同
console.log(bar);
function bar () {
console.log(1);
}
//打印结果:ƒ bar () { // console.log(1); //}
执行顺序相当于:
function bar () {
console.log(1);
}
console.log(bar);
函数提升是整个代码块提升到它所在的作用域的最开始执行
思考下面的问题(看明白函数声明式提升下面的问题大概可以理解为什么输出1而不是2了吧):
foo(); //1
var foo;
function foo () {
console.log(1);
}
foo = function () {
console.log(2);
}
这就是函数优先规则。
下面这段代码,在低版本的浏览器中,函数提升不会被条件判断所控制,输出2;但是在高版本的浏览器中会报错,所以应该尽可能避免在块内部声明函数
foo(); //低版本:2 //高版本: Uncaught TypeError: foo is not a function
var a = true;
if(a){
function foo () { console.log(1); }
}else{
function foo () { console.log(2); }
}
小结:
我们习惯将var a = 2;看做是一个声明,而实际上javascript引擎并不这么认为。它将var a和a = 2看做是两个单独的声明,第一个是编译阶段的任务,而第二个则是执行阶段的任务。
这意味着无论作用域中的声明出现在什么地方,都将在代码本身被执行前首先进行处理,可以将这个过程形象地想象成所有的声明(变量和函数)都会被“移动”到各自作用域的最顶端,这个过程被称为提升。
本文参考《你不知道的javascript》上卷
今天的文章浅谈JS变量提升_javascript好学吗「建议收藏」分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/74790.html