ES2015之前,只有全局作用于和函作用域
作用域是ECMAScript编程中非常重要的一个概念,良好的作用域控制技巧称为了ECMAScript开发者必备的技能。以往的ECMAScript标准中,只有全局作用域和函数作用域。ES2015引入了块级作用域。
示例1:
var foo = function() {
var local = {};
};
foo();
console.log(local); //=> undefined
//local处于函数作用域内,外部无法访问
var bar = function() {
local = {};
};
bar();
console.log(local); //=>{}
// local未标明var,默认提升为全局作用域的变量,函数外的全局作用域内可访问
示例2:
假设在页面中,有一组按钮(A、B、C),需求是,用户点击按钮组中的按钮时,输出点击按钮的标签值。当我们用一个统一的函数对事件进行响应时,我们可能会像下面这样去循环绑定这组按钮的事件处理
var buttons = document.querySelectorAll(".button"); // 获取按钮组
var output = document.querySelector("#output"); // 获取输出容器元素
for(var i = 0; i< buttons.length; ++i) { // 循环为每个按钮绑定点击事件
buttons[i].addEventListener('click', function(evt){
output.innerText = buttons[i].innerText; // 期望显示按钮自身的值
}, false);
}
上面这段代码看上去貌似没问题,当我们点击任意一个按钮时,程序都会报错,提示Cannot read property 'innerText' of undefined。因为循环完成后i的值是3,buttons[3]并不存在。计数器i存在于上一层作用域中,就意味着在对它的引用被全部解除之前,它胡一直保存着循环结束后的值,即按钮的个数。
let定义变量的块级作用域
for(let i = 0; i < buttons.length; ++i) {
// TODO
}
const定义常量
ES2015之前,对于常量的定义,一般都使用大写字母等方式来约定。这种妥协的“常量”是随时可以被改变的。ES2015引入了const来定义常量
// 定义一个常量
const PI = 3.1415926;
// 尝试修改
PI = 3.14; //=> Uncaught TypeError: Assignment to constant variable.
const确实创造了一个了一个不可变的内存绑定,字符串、数字、布尔值、undefined等基本值类型因为只使用了一段内存空间,所以它们由const定义,便是天生的值不可变。但对于对象和数组这类由若干内存空间片段组成的值并不会被锁定。
Object.freeze()让对象首层属性不可变
const obj1 = Object.freeze({
a: 1,
b: 2
});
obj1.a = 2; //=> Uncaught TypeError: Connot assign to read only property 'a' of object '<Object>'
const obj2 = Object.freeze({
a: {}
});
obj2.a.b = 1;
console.log(obj2); //=> {a: {b: 1}} 首层中存在对象,对象值依然可以被改变
// 需要一个小工具来创建一个完全的值不可变对象
// Object.deepFreeze from MDN
// To make obj fully immutable, freeze each object in obj.
// To do so, we use this function.
Object.deepFreeze = function(obj) {
// Retrieve the property names defined on obj
var propNames = Object.getOwnPropertyNames(obj);
// Freeze properties before freezeing self
propNames.forEach(function(name) {
var prop = obj[name];
// Freeze prop if it is an object
if(typeof prop == 'object' && prop != null)
Object.deepFreeze(prop)
});
// Freeze self (no-op if already frozen)
return Object.freeze(obj);
}
const obj3 = Object.deepFreeze({
a: {
b: 1
}
});
obj3.a.c = 2; //=> Uncaught TypeError: Can't add property c, object is not extensible
与我们所熟知的全局常量不同,使用const定义的常量与let一样,可以产生块级作用域效果。
变量的生命周期
在ECMAScript中,一个变量的生命周期是固定的,由两种因素决定,分别是作用域和对其的引用。
先用ES2015之前的代码来看一下:
(function() {
var foo = 'A';
})();
console.log(foo); //=> undefined
可以看到在一个匿名函数作用域内定义的变量foo,在脱离这个作用域后变量便不再存在。大部分ECMAScript引擎对垃圾收集的方式都是基于对变量的引用,当一个变量的引用被全部解除时,变量便会被清楚。我们常用闭包(Closure)的方式延长变量的生命周期:
闭包的原理是利用高阶函数产生能够穿透作用域的引用
function outter() {
const innerVariable = 'foobar';
return function() {
return innerVariable;
}
}
const fn = outter();
conlose.log(fn()); //=> foobar
这里成功地利用闭包将被定义在outter函数所形成作用域内的常量innerVariable所在的作用域引出来,从而在外部的作用域中能够读取到它的值。
let、const与新的循环语句
在ES5中,数组 (Array)被赋予了一个名为forEach的方法,传入回调函数来解决当时的for循环的作用域问题。
在ES2015(也叫ES6),引入了新的循环语句for-of,另外我有了let和const解决了块级作用域,于是乎,无需操心作用域的简洁的for循环又回来了。
const arr = [1, 2, 3];
for(const item of arr) {
console.log(item);
}
// 配合ES2015的解构(Destructuring)特性,在处理JSON数据时,更加得心应手
const Zootopia = [
{name: 'Nick', gender: 1, species: 'Fox'},
{name: 'Judy', gender: 1, species: 'Bunny'}
];
for(const {name, species} of Zootopia) {
console.log(`Hi, I am ${name}, and I am a ${species}.`);
}
//=>
// Hi, I am Nick, and I am a Fox.
// Hi, I am Judy, and I am a Bunny.
在ES2015中,数组再次被赋予了一个名为entries的方法,它可以返回对应的数组中每一个元素与其下标配对的一个新数组:
const arr = ['a', 'b', 'c'];
console.log(arr.entries()); //=> [[0, 'a'], [1, 'b'], [2, 'c']]
这个新特性可以与解构和for-of循环配合使用:
for(const [index, {name, species}] of Zootopia.entries()) {
console.log(`${index}. Hi, I am ${name}, and I am a ${species}.`);
}
//=>
// 0. Hi, I am Nick, and I am a Fox.
// 1. Hi, I am Judy, and I am a Bunny.