ES 6 系列为学习阮一峰老师 ECMAScript 6 入门 的一些笔记。
W3C标准文档地址: ECMAScript 6 Specification
学习ES 6 第一个概念一般都是 let
和 const
,两种新的声明变量的方式。
两者在使用上都类似于 var
用于声明变量。
let, const 与 var 的区别
-
块级作用域
使用let
和const
声明的变量,只在其声明所在代码块内有效(块级作用域)。if(true) { // 这里声明的 hello 函数只在 if 的块级作用域内有效 let hello = function() { alert('Hello'); } } // 试图调用 if 作用域内声明的 hello 方法,错误。 hello(); // ReferenceError: Can't find variable: hello
JavaScript 代码中需要块级作用域的几个场景:
- 内层变量可能会覆盖外层变量导致一些不可预知的行为
- 计数的循环变量泄露为全局变量
块级作用域的出现,让广泛使用的 IIFE (立即执行匿名函数)不再必要。
ES 6 中规定函数(通过function声明的具有变量声明提升的方法时可看出)本身的作用域,在其所在的块级作用域之内。
function f() { console.log('I am outside!'); }
(function () {
if(false) {
// 重复声明一次函数f
// 变量声明提升,但是作用域依旧在 if 的块级作用域内
function f() { console.log('I am inside!'); }
}
// 在 IIFE 作用域内调用 f()
f();
}());
上面代码在ES5中运行,会得到“I am inside!”,但是在ES6中运行,会得到“I am outside!”。
-
变量声明提升(Hoisting) 与 暂时性死区
使用let
和const
声明的变量都不存在 变量声明提升,一个变量必须先声明然后才能使用。
关于暂时性死区:在声明变量之前使用变量会错误。
let temp = 'global temp'; // 全局作用域下声明的 temp 变量
if (true) {
// if 包含的块级作用域中的 temp 引用,由于还没声明所以错误。
// 这里还涉及到变量绑定的问题,
// 在 ES 6 中如果一个块级作用域中有存在 let 命令,
// 它所声明的变量就 '绑定' 在这个区域,不受外部的影响。
// 这就解释了为什么这里的 temp 没有引用全局的 temp = 'global temp'
temp = 'abc'; // ReferenceError
// 不存在变量声明提示,所以 temp 在该作用域类的声明不会像 ES 3 中一样被放到作用域最开始的地方声明并赋值为 undefined
let temp;
}
// ReferenceError: Cannot access uninitialized variable.
ES 6 中规定暂时性死区和不存在变量声明提升,主要是为了减少运行时错误,防止在变量声明前使用这个变量,从而导致意料之外的行为。
暂时性死区同时意味着 typeof
不再是一个百分百安全的操作(ReferenceError
错误)。
let temp = 'global temp';
if(true){
// 使用 typeof 操作符作用在 temp 上,由于 if 作用域内的 temp 变量目前处在 暂时性死区中,所以引用错误
console.log(typeof temp);
// ReferenceError: Cannot access uninitialized variable.
let temp = 'temp';
}
不能重复声明
使用let
和const
声明的变量在同一作用域内不能重复声明。
使用var
声明的变量如果变量名相同后声明的变量将会覆盖变量原来的值。全局变量以及全局对象属性
ES 5 中全局对象的属性 与 全局变量基本是等价的(也有区别,比如通过 var 声明的全局变量不能使用 delete 从 global (window/global) 上删除,在变量的访问上基本等价)。
很容易的在不知不觉中创建了全局变量(全局对象的属性)
ES 6 中做了严格的区分,使用 var 和 function 声明的全局变量依旧作为 全局对象的属性,使用 let
, const
命令声明的全局变量不属于全局对象的属性。
let let_test = 'test';
window.let_test; // undefined
var var_test = 'test';
window.var_test; // test
const 的一些注意事项
使用 let
声明变量除了以上和 var
不同的地方,其他使用和 var
基本一致,声明的变量可以进行修改。
而使用 const
声明的变量是用来声明一个常量,一旦声明,常量的值是不能改变的。使用时需要注意以下几点:
一旦声明不能修改
严格模式下对已经初始化的常量赋值会报错。
非严格模式下对已经初始化的常量赋值不报错但是无效。避免只声明不赋值
严格模式下对常量声明的变量只声明不赋值会报错。
if(true) {
'use strict';
const test;
// SyntaxError: Unexpected token ';'. const declared variable 'test' must have an initializer.
}
非严格模式下不会报错,但值是undefined
且无法修改-
复合类型
const
变量保存的是引用
复合类型的常量不指向数据,而是指向数据(heap)所在的地址(stack),所以通过 const 声明的复合类型只能保证其 地址引用不变,但不能保证其数据不变。const arr= [1, 2]; // 修改数据而不修改引用地址,正确执行 arr.push(3); // [1, 2, 3] // 修改 arr 常量所保存的地址的值,报错 arr = []; // TypeError: Attempted to assign to readonly property.
-
对象的冻结
因为 复合类型const
是保存引用的原因所以存在 对象的冻结的问题。
简单的使用const
无法完成对象的冻结。
可以通过 Object.freeze() 方法实现对对象的冻结。
使用Object.freeze()
方法返回的对象将不能对其属性进行配置(definedProperty()
不可用)同时不能添加新的属性和移除(remove)已有属性。In essence the object is made effectively immutable.
本质上是产生一个有效的不可变对象。因此对其进行的修改将不会生效。但同样有
引用 和 数据
的问题(和复合类型 const 变量保存的是引用
一样),所以彻底冻结对象时需要递归的对它的对象属性进行冻结。
ES5只有两种声明变量的方法:var
命令和 function
命令。ES6除了添加 let
和 const
命令,以及import
命令和 class
命令(后面将会学习)。所以,ES6一共有6种声明变量的方法。