Javascript之hoisting变量提升
javascript不仅仅是一门弱类型语言,还是一门解释型语言。一门编程语言的本质就是这样,优点即是缺点,缺点也往往是优点。JS因为有了变量提升,能够使我们在编程时可以忽略“先声明,再使用”的规则,但也正是JS变量提升的存在,使得我们编程时一不留神就掉进了陷阱。
先来看一段代码:
1 a="test";
2 var a;
3 console.log(a);
按理说应该输出Undefined,但是结果却是:“test”。
实际上js代码在执行的整个过程中是有所谓的编译期,只不过这个编译期很短暂,但却不可忽略,编译期间js引擎做了很多事情:词法分析,作用域链的构建等,还有一个就是提升,声明的提升,包括变量的声明和函数的声明,提升到何处?提升到作用域的顶端。
也就是说,Hoisting:在变量(或者函数)的作用域内,不管变量(或者函数)在何处声明,都会被提升到作用域的顶部,但是变量(或者函数)初始化的顺序不变。换句话说“var a=2”会被拆分成“var a;a=2”两个部分,前一个部分会hoisting到作用域的顶端,而后一部分放在原地不变。
下面来看一些JS变量提升的两个规则。
一、函数声明提升,函数表达式不提升
1 foo();
2 var func=function foo(){
3 console.log(a);
4 var a="test c";
5 }
等价于
1 var func;
2 foo();
3 func=function foo(){
4 var a;
5 console.log(a);//Undefined
6 a="test c";
7 }
二、函数提升优先于变量提升
1 var foo=3;
2 foo();
3 function foo(){
4 console.log(1);
5 }
6 foo=function(){
7 console.log(2);
8 }
等价于
1 function foo(){
2 console.log(1);
3 }
4 var foo;
5 foo=3;
6 foo();//TypeError:此时foo被覆盖,已变成一个变量了
7 foo=function(){
8 console.log(2);
9 }