浅谈JavaScript 声明提升
1引例及基本原理
在学习JavaScript声明提升之前,我们先看下面这个例子:
console.log(a); vara=2;
运行结果会是什么?你可能会有以下的猜测:
1.报错ReferenceError:aisnotdefined;
2.打印2;
3.打印undefined。
正确的结果是第三种,打印undefined。
下面让我们来看看具体的原因。其实,对于vara=2;这条语句,JavaScript会将其视为两个声明:
- 定义声明vara,会在编译阶段进行;
- 赋值声明a=2,会留在原地等待执行阶段进行。
而所谓的声明提升:就是JavaScript会把var变量声明和函数声明都会被提升到各自作用域的顶部,而赋值操作并不会被提升。
因此,上面的例子实际是按照这样的流程来处理:
vara; console.log(a); a=2;
我们还需要知道,不仅仅是var变量声明会提升,函数声明同样也会提升,现在来看下面这个例子
foo(); functionfoo(){ console.log(a); vara=2; }
这个例子的运行结果为:打印undefined。这段代码实际上会被理解为为下面的形式:
functionfoo(){ vara; console.log(a); a=2; } foo();
2关于声明提升的常见问题
2.1函数表达式
先看一个函数表达式的例子:
console.log(foo); varfoo=function(){}
上面代码的运行结果为:打印undefined。实际上,变量标识符foo被提升了,但它的赋值操作并没有被提升,我们可以理解为下面的形式:
varfoo; console.log(foo); foo=function(){}
结论:函数声明会被提升,但函数表达式不会被提升。
2.2声明的优先级
如果在同一个作用域内,存在同名的函数声明和var变量声明,那么会发生什么样的情况呢?我们同样再来看一个例子:
functiona(){} vara; console.log(a);
vara; functiona(){} console.log(a);
上面的两种写法,运行结果均为打印a(){}。也就是说,如果在同一个作用域内,存在同名的函数声明和var变量声明,则函数声明的优先级更高。
还有一种情况:如果同一个作用域内,存在多个同名的函数声明。这种情况下,后面声明的会覆盖前面声明的。
3练习题
3.1第一题
vargetName=function(){ console.log(1); } functiongetName(){ console.log(2); } getName();
答案:打印1
解析:提升后的顺序如下
vargetName;//与函数声明同名,故失效 functiongetName(){ console.log(2); } getName=function(){//赋值 console.log(1); }; getName();
3.2第二题
vara=1; functionb(){ a=10; return; functiona(){ console.log(a); } } b(); console.log(a);
答案:打印1
解析:首先,我们需要梳理清楚声明的提升。
本题有几个关键点,我们需要明白:
函数b内的a函数虽然在return之后,但它并没有失效,它会发生声明提升,从而提升到b函数作用域的顶部。
很多童鞋(比如我TAT)可能会错误地认为这题的答案是10,认为我们在最后调用了b函数,修改了全局变量a。实际上,由于函数a发生了声明提升,导致在函数b内“遮蔽”了全局作用域中的变量a,因此,a=10;其实是将函数a重新赋值。为了进一步测验,大家可以把a函数注释掉,会发现此时的答案就变成了10。
注:本题还涉及到了闭包的相关知识,这一题详细的解析请见参考资料[2],讲得非常详细。
vara;//全局变量a发生了声明提升 functionb(){ functiona(){//函数a发生声明提升 console.log(a); } a=10;//因为函数a离它最近,因此赋值给函数a return; } a=1;//赋值给了全局变量a b(); console.log(a);
4参考资料
[1]《你不知道的JavaScript》
[2]js中变量名与函数名重名的问题,Charles_Tian
[3]函数声明与变量声明的提升机制优先级问题,一个菜鸟的奋斗史
以上就是浅谈JavaScript声明提升的详细内容,更多关于JavaScript声明提升的资料请关注毛票票其它相关文章!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。