1. 什么是变量提升?
当栈内存(作用域)形成, JS
代码自上而下执行之前,浏览器首先会把所有带var/function
关键字的进行提前声明或者定义,这种预先处理机制称之为变量提升。
console.log(a); // undefined
console.log(fn); // fn(){var b = 2}
console.log(b); // Uncaught ReferenceError: b is not defined
var a = 1;
function fn() {
var b = 2;
};
变量提升阶段,var
只声明,而function
声明和赋值都会完成
最开始的时候输出a
和fn
,会发现a
是undefined
,而fn
是function
的字符串。 在变量提升阶段,带var
的只声明(默认值为undefined
),而带function
的变量声明和赋值都会完成。到了代码执行阶段,var
声明的变量会赋值,而function
声明的变量因为在变量提升阶段已经赋值,所以直接跳过。
变量提升只发生在当前作用域
变量提升只发生在当前作用域,开始加载页面的时候只对全局作用域下的进行变量提升,此时函数作用域如果没执行的话存储的还只是字符串而已。
当函数执行时会生成函数作用域,也称私有作用域,在代码执行前会先形参赋值再进行变量提升。在ES5
中作用域只有全局作用域和私有作用域,大括号不会形成作用域。全局作用域下声明的变量或者函数是全局变量,在似有作用域下声明的变量是私有变量。
私有变量和全局变量
只有在私有作用域中用var
和function
声明的变量和形参两种才是私有变量,其他都是全局变量。剩下的都不是私有的变量,都需要基于作用域链的机制向上查找。
var a = 12,
b = 13,
c = 14;
function fn(a) {
console.log(a, b, c); // 12 , undefined , 14
var b = c = a = 20;
console.log(a, b, c); // 20 ,20 ,20
}
fn(a);
console.log(a, b, c); //12,13,20
上例中全局变量有a,b,c
和fn
,私有变量有a
(形参也是私有变量)和b
。
- 先看第一个输出为什么输出为
12 , undefined , 14
。当fn
执行,第一步是形参赋值,私有变量a = 12
,然后变量提升,私有变量b
默认赋值undefined
,c
不是私有变量,所以向上级作用域查找,全局变量c
的值是14
。 - 然后第二个输出为什么是
12,20,20
,在私有作用域中,执行了var b = c = a = 20;
,这个操作相当于var b = 20 ; c = 20; a = 20
。b
变量从默认undefined
赋值为20 和a
变量则重新赋值为20
,而c
变量因为不是私有变量,所以c = 20
相当于window.c = 20
,故输出12,20,20
。 - 最后第三个输出为什么是
12,13,20
,因为fn
内部有私有变量a
和b
,函数内部修改的a
和b
都是私有变量,不影响全局,而c
不是私有变量,所以沿着上级作用域查找,修改的话c = 20
相当于window.c = 20
,所以输出12,13,20
。
2. 条件判断下的变量提升
在当前作用域下,不管条件是否成立都要进行变量提升,不过新版本浏览器对function
在条件判断内的变量提升做了限制。带var
的还是只有声明,带function
的在老版本浏览器渲染机制下,声明和定义都会处理,但是为了迎合ES6
的块级作用域,新版浏览器对于函数(在条件判断中的函数),在变量提升阶段,不管条件是否成立,都只是先声明,没有定义,类似于var
,通过下面的例子可以进一步论证:
console.log(a); // undefined
console.log(b); // undefined
if (false) {
var a = 1;
function b() {
console.log("1");
}
}
console.log(a); // undefined
console.log(b); // undefined
通过上例可以发现var
和function
都进行了变量提升,但是function
没有在变量提升阶段定义。这里需要注意的是,如果条件成立的话,判断体内函数的处理会有点不一样,看下例:
console.log(fn); //undefined
if (true) {
console.log(fn); // function fn() { console.log(1) }
function fn() {
console.log(1);
}
}
console.log(fn); // function fn() { console.log(1) }
这里比较疑惑的是函数体内将然输出fn
的函数体,之前不是说在条件判断内不管条件是否成立,都只是先声明,没有定义吗,所以不是应该输出undefined
才对吗?
条件判断内不管条件是否成立,都只是先声明,没有定义。这个结论其实也有个前提,就是在代码执行前的变量提升阶段,在条件判断中的函数,按照正常思维,应该是只有条件判断成立了,它才会赋值,如果条件判断不成立,这个函数就用不到,就不应该赋值。所以如果条件判断成立,JS
在进入到判断体中(在ES6
中它是一个块级作用域),第一件事不是执行代码,而是类似变量提升,先把函数声明和定义了,也就是说判断体中代码执行之前,判断体内的函数就已经赋值了。
3. 变量提升中重名的处理
在变量提升中,如果名字重复了,不会重新的声明,但是会重新赋值,不管是代码提升阶段还是代码执行阶段都是如此。要注意的是带var
和function
关键字声明相同的名字,这种也算是重名了(其实是一个fn
,只是存储的类型不一样)。看一道题目来加深下理解:
fn(); // 2
function fn() { console.log(1) };
fn(); // 2
var fn = 100;
fn(); //Uncaught TypeError: fn is not a function
function fn() { console.log(2) };
上例中,代码执行前会先变量提升,三个变量都会提升,重名的话后面的变量覆盖前面的,同时function
在变量提升阶段声明和定义都会完成,所以fn
的值为function fn() { console.log(2) };
。然后开始执行代码,执行fn()
输出2
,因为代码执行阶段function
不会重复定义,所以第二个fn()
也输出2
,直到变量fn=100
,fn
变量的类型被改变成number
类型,所以后面再执行fn()
的时候就直接报错。
4. ES6中的let不存在变量提升
在ES6
中基于let/const
等方式创建的变量或者函数都不存在变量提升机制
console.log(a); // Uncaught ReferenceError: a is not defined
let a = 1;
console.log(a); // 1
因为a
用let
声明不存在变量提升,所以声明a
之前输出a
的话会报错。
如果用let
声明的全局变量和window
属性的映射机制会被切断
console.log(window.a); //undefined
let a = 1;
console.log(window.a); //undefined
用let
声明的a
是个全局变量,但是我们在赋值前和赋值后输出window.a
都是undefined
。
在相同的作用域中,let
不能声明相同名字的变量
let a = 10;
console.log(a);
let a = 20; // Uncaught SyntaxError: Identifier 'a' has already been declared
console.log(a);
用let
声明变量虽然没有变量提升,但是在当前作用域代码自上而下执行之前,浏览器会做一个重复性检测,自上而下查找当前作用域下所有变量,一旦发现有重复的,直接抛出异常,代码也不再执行,换句话说,就是虽然没有把变量提前声明定义,但是浏览器已经记住了,当前作用域有哪些变量。上例第二行console.log(a)
没有输出而直接在let a = 20
这一行报错,说明代码还没有执行,在重复检查机制中就直接抛出异常了。
var a = 10;
let a = 20; //Uncaught SyntaxError: Identifier 'a' has already been declared
b = 10; //Uncaught ReferenceError: Cannot access 'b' before initialization
let b = 20;
还有一点要注意的是不管用什么方式在当前作用域下声明了变量,再次使用let
创建都会报错。
5. 暂时性死区
只要块级作用域内存在let
命令,它所声明的变量就“绑定”(binding
)这个区域,不再受外部的影响。
var a = 10;
if (true) {
console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 20;
}
上例中有全局变量a
,但是块级作用域内let
又声明了一个局部变量a
,导致后者绑定这个块级作用域,所以在let
声明变量前,对tmp
赋值会报错。
ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。总之,在代码块内使用let
命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone
,简称TDZ
)。
上面代码中,在let
命令声明变量tmp
之前,都属于变量tmp
的死区,暂时性死区也意味着typeof
不再是一个百分之百安全的操作。
typeof b; // undefined
typeof a; // Uncaught ReferenceError: Cannot access 'a' before initialization
let a;
上面代码中,变量a
使用let
命令声明,所以在声明之前,都属于a
的死区,只要用到该变量就会报错。因此typeof
运行时就会报错。不过b
是一个不存在的变量名,结果返回undefined
。所以在没有let
之前,typeof
运算符是百分之百安全的,永远不会报错。现在这一点不成立了。这样的设计是为了让大家养成良好的编程习惯,变量一定要在声明之后使用,否则就报错。