本文学自阮大神的 let和const命令,文章整理为精简版。
一、let命令
let
所声明的变量,只在le
t命令所在的代码块
内有效。就不做过多介绍了。
下面通过for循环来简要说明下let
:
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
若for循环中使用var,则a6打印出来的为10;
上面代码中,变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。你可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为JavaScript 引擎内部会记住上一轮循环的值
,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。
不存在变量提升
简单一句话:若没有let定义变量,那么变量就是未定义的,它所声明的变量一定要在声明后使用,否则报错。
暂时性死区
简单一句话:只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。
总结为:在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
不允许重复性声明
let不允许在相同作用域内,重复声明同一个变量。
二、块级作用域
为什么需要块级作用域
ES5 只有
全局作用域
和函数作用域
,没有块级作用域
,这带来很多不合理的场景。
- 第一种场景,内层变量可能会覆盖外层变量。
- 第二种场景,用来计数的循环变量泄露为全局变量。
ES6的块级作用域
即代码块,不再赘述,记录一点:块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了。
块级作用域与函数声明
ES5 规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。
上面两种函数声明,根据 ES5 的规定都是非法的
。
但是,浏览器没有遵守这个规定
,为了兼容以前的旧代码,还是支持在块级作用域之中声明函数。
关于ES6的块级作用域与函数声明这里要注意:ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。但是考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。
三、const命令
- const声明一个只读的常量。一旦声明,常量的值就不能改变。
- const声明的变量不得改变值,这意味着,const一旦声明变量,就必须
立即
初始化,不能留到以后赋值
。- const的作用域与let命令相同:只在声明所在的块级作用域内有效。
- const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。
本质
const实际上保证的,
并不是变量的值不得改动
,而是变量指向的那个内存地址
所保存的数据不得改动。
对于简单类型的数据
(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据
(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。
如果真的想将对象冻结,应该使用
Object.freeze
方法。
ES6 声明变量的六种方法
ES5 只有两种声明变量的方法:
var
命令和function
命令。ES6 除了添加let
和const
命令,还有另外两种声明变量的方法:import命令
和class
命令。所以,ES6 一共有 6 种声明变量的方法。
四、顶层对象的属性
顶层对象,在
浏览器
环境指的是window对象
,在Node
指的是global
对象。ES5 之中,顶层对象的属性与全局变量是等价的
。
顶层对象的属性与全局变量挂钩,被认为是 JavaScript 语言最大的设计败笔之一,原因如下:
- 没法在编译时就报出变量未声明的错误,只有运行时才能知道(因为全局变量可能是顶层对象的属性创造的,而属性的创造是动态的);
- 程序员很容易不知不觉地就创建了全局变量(比如打字出错).
- 顶层对象的属性是到处可以读写的,这非常不利于模块化编程。
ES6 为了改变这一点,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,
let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性
。也就是说,从 ES6 开始,全局变量将逐步与顶层对象的属性脱钩。
五、global对象
ES5 的顶层对象,本身也是一个问题,因为它在各种实现里面是不统一的。
- 浏览器里面,顶层对象是
window
,但 Node 和 Web Worker 没有window。 - 浏览器和 Web Worker 里面,
self
也指向顶层对象,但是 Node 没有self。 - Node 里面,顶层对象是
global
,但其他环境都不支持。
同一段代码为了能够在各种环境,都能取到顶层对象,现在一般是使用this变量,但是有局限性。
很难找到一种方法,可以在所有情况下,都取到顶层对象。下面是两种勉强可以使用的方法。
// 方法一
(typeof window !== 'undefined'
? window
: (typeof process === 'object' &&
typeof require === 'function' &&
typeof global === 'object')
? global
: this);
// 方法二
var getGlobal = function () {
if (typeof self !== 'undefined') { return self; }
if (typeof window !== 'undefined') { return window; }
if (typeof global !== 'undefined') { return global; }
throw new Error('unable to locate global object');
};