共计 4050 个字符,预计需要花费 11 分钟才能阅读完成。
为什么需要块级作用域
ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。
通过 var 声明变量存在变量提升:
if (condition) {
var value = 1
}
console.log(value)
初学者可能会认为当变量 condition 为 true 时,才会创建 value。当 condition 为 false 时,不会创建 value,结果应该是报错。然而因为 JavaScript 存在变量提升的概念,代码等同于:
var value
if (condition) {
value = 1
}
console.log(value) // undefined
所有当 condition 为 false,输入结果为 undefined。
ES5 只有全局作用域和函数作用域,其中变量提升也分成两种情况:一种全局声明的变量,提升会在全局最上面,上面就属于全局变量声明;一种是函数中声明的变量,提升在函数的最上方:
function fn() {
var value
if (condition) {
value = 1
}
console.log(value) // undefined
}
console.log(value) // Uncaught ReferenceError: value is not defined
所有当 condition 为 false,函数内输入结果为 undefined,函数输入就会报错 Uncaught ReferenceError: value is not defined。函数的变量提升是根据最近的外层函数提升,没有函数就为全局下提升。
为规范变量使用控制,ECMAScript 6 引入了块级作用域。块级作用域就是 {} 之间的区域
let 和 const
我们来整理一下 let 和 const 的特点:
不存在变量提升
if(condition) {
let value = 1
}
console.log(value) // Uncaught ReferenceError: value is not defined
不管 conditon 为 true 或者 false,都无法输出 value,结果为 Uncaught ReferenceError: value is not defined
重复声明报错
let value = 1
let value = 2
重复声明同一个变量,会直接报错 Uncaught SyntaxError: Identifier ‘value’ has already been declared
不绑定在全局作用域上
var value = 1
console.log(window.value) // 1
在来看一下 let 声明:
let value = 1
console.log(window.value) // undefined
let 和 const 的区别:
const 声明一个只读的常量。一旦声明,常量的值就不能改变。
const value = 1
value = 2 // Uncaught TypeError: Assignment to constant variable.
上面代码表明改变常量的值会报错。
const 声明的变量不得改变值,这意味着,const 一旦声明变量,就必须立即初始化,不能留到以后赋值。
const foo;
// SyntaxError: Missing initializer in const declaration
上面代码表示,对于 const 来说,只声明不赋值,就会报错。
对于对象的变量,变量指向是数据指向的内存地址。const 只能保证数据指向内存地址不能改变,并不能保证该地址下数据不变。
const data = {
value: 1
}
// 更改数据
data.value = 2
console.log(data.value) // 2
// 更改地址
data = {} // Uncaught TypeError: Assignment to constant variable.
上述代码中,常量 data 存储的是一个地址,这里地址指向一个对象。不可变的只是这个地址,即不能将 data 指向另一个地址,但是对象本身是可以变的,所以依然为其更改或添加新属性。
暂时性死区
在代码块内,使用 let 命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
let 和 const 声明的变量不会被提升到作用域顶部,如果在声明之前访问这些变量,会导致报错:
console.log(typeof value); // Uncaught ReferenceError: value is not defined
let value = 1;
这是因为 JavaScript 引擎在扫描代码发现变量声明时,要么将它们提升到作用域顶部 (遇到 var 声明),要么将声明放在 TDZ 中 (遇到 let 和 const 声明)。访问 TDZ 中的变量会触发运行时错误。只有执行过变量声明语句后,变量才会从 TDZ 中移出,然后方可访问。
看似很好理解,不保证你不犯错:
var value = ‘global’;
// 例子 1
(function() {
console.log(value);
let value = ‘local’;
}());
// 例子 2
{
console.log(value);
const value = ‘local’;
};
两个例子中,结果并不会打印 “global”,而是报错 Uncaught ReferenceError: value is not defined,就是因为 TDZ 的缘故。
常见面试题
for(var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i)
})
}
// 3
// 3
// 3
上述代码中,我们期望输出 0,1,2 三个值,但是输出结果是 3,3,3,不符合我们的预期。
解决方案如下:使用闭包解法
for(var i = 0; i < 3; i++) {
(function(i) {
setTimeout(() => {
console.log(i)
})
})(i)
}
// 0
// 1
// 2
ES6 的 let 解法
for(let i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i)
})
}
// 0
// 1
// 2
上述代码中,变量 i 是 let 声明的,当前的 i 只在本轮循环有效,所以每一次循环的 i 其实都是一个新的变量,所以最后输出的是 0,1,2。你可能会问,如果每一轮循环的变量 i 都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值。这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量 i 时,就在上一轮循环的基础上进行计算.
另外,for 循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
let i = ‘abc’;
console.log(i);
}
// abc
// abc
// abc
上面代码正确运行,输出了 3 次 abc。这表明函数内部的变量 i 与循环变量 i 不在同一个作用域,有各自单独的作用域。
如果尝试将 let 改成 const 定义:
for (const i = 0; i < 3; i++) {
console.log(i);
}
// 0
// Uncaught TypeError: Assignment to constant variable.
上述代码中,会先输出一次 0, 然后代码就会报错。这是由于 for 循环的执行顺序造成的,i 定义为 0,然后执行 i < 3 比较,符合条件执行循环主体,输出一次 0, 然后执行 i++,由于 i 使用 const 定义的只读变量,代码执行报错。
说完了普通的 for 循环,我们还有 for…in 循环呢~
那下面的结果是什么呢?
const object = {a: 1, b: 1, c: 1};
for (const key in object) {
console.log(key)
}
// a
// b
// c
上述代码中,虽然使用 const 定义 key 值,但是代码中并没有尝试修改 key 值,代码正常执行,这也是普通 for 循环和 for…in 循环的区别。
Babel 编译
在 Babel 中是如何编译 let 和 const 的呢?我们来看看编译后的代码:
let value = 1;
编译为:
var value = 1;
我们可以看到 Babel 直接将 let 编译成了 var,如果是这样的话,那么我们来写个例子:
if (false) {
let value = 1;
}
console.log(value); // Uncaught ReferenceError: value is not defined
如果还是直接编译成 var,打印的结果肯定是 undefined,然而 Babel 很聪明,它编译成了:
if (false) {
var _value = 1;
}
console.log(value);
我们再写个直观的例子:
let value = 1;
{
let value = 2;
}
value = 3;
var value = 1;
{
var _value = 2;
}
value = 3;
本质是一样的,就是改变量名,使内外层的变量名称不一样。
那像 const 的修改值时报错,以及重复声明报错怎么实现的呢?
其实就是在编译的时候直接给你报错……
那循环中的 let 声明呢?
var funcs = [];
for (let i = 0; i < 10; i++) {
funcs[i] = function () {
console.log(i);
};
}
funcs[0](); // 0
Babel 巧妙的编译成了:
var funcs = [];
var _loop = function _loop(i) {
funcs[i] = function () {
console.log(i);
};
};
for (var i = 0; i < 10; i++) {
_loop(i);
}
funcs[0](); // 0
项目实践
在我们实际项目开发过程中,应该默认使用 let 定义可变的变量,使用 const 定义不可变的变量,而不是都使用 var 来定义变量。同时,变量定义位置也有一定区别,使用 var 定义变量都会在全局顶部或者函数顶部定义,防止变量提升造成的问题,对于使用 let 和 const 定义遵循就近原则,即变量定义在使用的最近的块级作用域中。
ES6 系列文章
ES6 系列文章地址:https://github.com/changming-…