ECAMScript2015-声明

前言

ECAMScript2015标准在原有var基础上新增了letconst声明的方式,今天主要就是学习一下ECAMScript2015对于声明的扩展


let命令

ES6新增了let命令,用来声明变量。它用法类似于var,但所声明的变量,只在let命令所在的代码块内有效。

1
2
3
4
5
6
{
let a = 10;
var b = 1;
}
a; // ReferenceError: a is not defined
b; // 1

上面代码在代码块之中,分别用letvar声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。

由于let声明只在块作用域中生效,随意它可以很好的解决闭包产生的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
let a = [];
for(var i = 0; i < 10; i++) {
a[i] = function() {
console.log(i);
};
}
a[6](); // 10
for(let i = 0; i < 10; i++) {
a[i] = function() {
console.log(i);
};
}
a[6](); // 6

当变量ivar声明的时,它在全局范围内有效,所以全局只有一个变量i。每一次循环,变量i的值都会发生改变,而所有函数中的console.log(i),里面的i指向的就是全局的i。所以运行时,所有console都会输出最后i 的值,也就是10。

而如果使用let,由于let是块作用域声明,所以所有的i都将保存为当时循环块内的值。

另外,for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域

1
2
3
4
5
6
7
for(let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc

不存在变量提升

var声明会发生变量提升的现象,即变量在声明之前是可以使用,值为undefined。为了纠正这种令人困扰的问题,let命令改变了语法行为,他所声明的变量一定要在声明后使用,否则报错

1
2
3
4
5
console.log(foo); // undefined
var foo = 2;

console.log(bar); // ReferenceError: bar is not defined
let bar = 2;

暂时性死区

只要块级作用域内存在let命令,它所声明的变量就绑定这个区域,不再受外部的影响

1
2
3
4
5
6
var tmp = 123;

if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}

示例代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量之前,对tmp进行操作就会报错。

ES6明确规定,如果区域中存在letconst命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错,这种语法被称为暂时性死区

1
2
3
4
5
6
7
8
9
var tmp = 123;
if (true) {
tmp = 'abc';
console.log(tmp);
// 暂时性死区
let tmp;
console.log(tmp); // undefined
temp = 123;
}

暂时性死区意味着typeof不再是一个百分百安全的操作

1
2
3
4
{
typeof x; // ReferenceError
let x;
}

上面代码中,变量x使用let命令声明,所以在声明之前,都属于x死区

ES6规定暂时性死区和letconst语句不出现变量提升,主要是为了减少运行时错误。防止在变量前使用这个变量,从而导致意料之外的行为。

const命令

const声明一个只读的常量。一旦声明,常量的值就不能改变

1
2
3
const PI = 3.1415;
PI; // 3.1415
PI = 3; // TypeError: Assignment to constant variable;

const声明的变量得改变值,这意味着,const一旦声明变量,就必须立即初始化。

const得作用域与let命令相同,值在声明所在的块作用域内有效。

const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。

const实际上保证的是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据,值就保存在变量指向的那个内存地址,因此等同于常量。但对于引用类型,变量指向的栈内存地址保存的只是一个指向堆的指针,const只能保证这个指针是固定,但不能保证指针指向地址的数据是不变的。

顶层对象的属性

顶层对象,在浏览器环境中指的是window对象,在Node指的是global对象。ES5之中,顶层对象的属性与全局变量是等价的

1
2
3
4
window.a = 1;
a; // 1
a = 2;
window.a; // 2

顶层对象的属性与全局变量挂钩,被认为是JavaScript最大的设计败笔。

ES6 为了改变这一点,同时为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。也就是说,从 ES6 开始,全局变量将逐步与顶层对象的属性脱钩。

1
2
3
4
5
6
7
var a = 1;
// 如果在 Node 的 REPL 环境,可以写成 global.a
// 或者采用通用方法,写成 this.a
window.a // 1

let b = 1;
window.b // undefined

上面代码中,全局变量avar命令声明,所以它是顶层对象的属性;全局变量blet命令声明,所以它不是顶层对象的属性,返回undefined


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!