1.引言
初学js不久,还是发现js和其他编程语言(java,C#…)有些不一样的,一些强类型语言中带过来的“固化”的思想在js中可能会让你莫名其妙,what?这特么也可以?下面介绍的就是其中之一,javascript hoisting 机制,也就是js提升机制咯。本篇不在传道受业,仅仅是方便个人复习翻阅,文中若有纰漏,请留言指出,不必留情。
2.Hoisting
先提一个问题:解释语言是不是一行一行的从上到下的执行,读一行,翻译一行?在回答这个问题之前,不妨来看看这个简单的示例(Demo1):
a="test a"
var a;
console.log(a);
会输入什么?显然Undefined,var a;在后面啊,默认值不是Undefined吗,但是结果却是:“test a”
那这样写行不行呢?(Demo2:结果显示却是你意料之中的“Undefined”)
console.log(a);
var a="test b";
实际上js代码在执行的整个过程中是有所谓的编译期,只不过这个编译期很短暂,但却不可忽略,编译期间js引擎做了很多事情:词法分析,作用域链的构建等,还有一个就是提升,声明的提升,包括变量的声明和函数的声明,提升到何处?提升到作用域的顶端,也就是说,Hoisting:在变量(或者函数)的作用域内,不管变量(或者函数)在何处声明,都会被提升到作用域的顶部,但是变量(或者函数)初始化的顺序不变。换句话说“var a=2”会被拆分成“var a;a=2”两个部分,前一个部分会hoisting到作用域的顶端,而后一部分放在原地不变(函数的声明后面会有介绍,稍安勿躁!),干说理论蛋疼,现在结合上面的Demo1和Demo2看看:
Demo1:由于变量a的声明会提升到作用于的顶端,初始化的位置没有变化,所以它等价于下面的代码,显而易见输出结果“test a”。
var a;
a="test a"
console.log(a);
Demo2:等价于下面的代码,输出的是变量a的默认值Undefined。
var a;
console.log(a);
a="test b";
值得注意的是上面说的是变量的Hoisting,函数的Hoisting大同小异,但是还是有一些注意的地方:
1. 函数声明提升,函数表达式不提升
foo();
var func=function foo(){
console.log(a);
var a="test c";
}
等价代码:
var func;
foo();
func=function foo(){
var a;
console.log(a);//Undefined
a="test c";
}
而不是等价于:
function foo(){
var a;
console.log(a);
a="test c";
}
var func;
foo();
func=foo;
2. 函数提升优先于变量提升
var foo=3;
foo();
function foo(){
console.log(1);
}
foo=function(){
console.log(2);
}
实际上上述代码等价于:
function foo(){
console.log(1);
}
var foo;
foo=3;
foo();//TypeError:此时foo被覆盖,已变成一个变量了
foo=function(){
console.log(2);
}
3.注意
- 尽量避免函数名与变量名重复,当然一般做项目过程中也不会重复的,只是在一些面试题里面出现,用来考察你对Hoisting的理解深入程度。
- Hoisting提升到作用域的顶端,所以应该避免在块中声明变量或者函数,因为块容易被看成一块作用域(ES6中的块级作用域除外)。
- 声明本身会被提升,而包括函数表达式的赋值在内的赋值操作并不会提升。