es6之let和const命令的一些笔记
let和const命令
let命令
基本用法
let命令用来声明变量,声明的变量只在命令所在的代码块内有效。for循环中很适合使用let命令。
有必要理解的例子:
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
这里使用的var声明变量i,导致全局只有一个变量i,所以数组a的所有函数内部的console.log(i)里的i是最后一轮循环中i的值。也就是10,用let声明变量i能避免这个问题,使程序结果符合预期。
不存在变量提升
let不存在变量提升。使用var命令声明变量会发生变量提升,变量在声明前可以被使用,并且值为undefined。用let更符合我们的逻辑,用let声明的变量,要在声明之后才能使用,否则报错。
TDZ
在代码块内,使用let(或const)命令声明变量之前,该变量都是不可用的,在语法上,这称为"暂时性死区"(temporal dead zone)。
有必要理解的例子:
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
if (true) {
// TDZ开始
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
let tmp; // TDZ结束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}
未声明的变量,使用typeof不会报错,返回undefined。若是在let声明之前使用typeof则会报错。
关于TDZ,还有一些难以被发现的例子:
unction bar(x = y, y = 2) {
return [x, y];
}
bar(); // 报错
//因为用y赋值给x,但此时y还没有声明,如果交换顺序则不会报错
function bar(x = 2, y = x) {
return [x, y];
}
bar(); // [2, 2]
//···························
// 不报错
var x = x;
// 报错
let x = x;
// ReferenceError: x is not defined
这提示我们,我们应该避免在变量完成声明之前使用它,养成良好的编程习惯。
总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。
不允许重复声明
在相同作用域内,let不允许重复声明一个对象。
块级作用域
如果没有块级作用域
ES5只有全局作用域和函数作用域,没有块级作用域。这会遇到一些问题。主要问题有2种:
- 内层变量覆盖外层变量。这是由于var声明的变量会发生变量提升,会导致一些容易忽视的问题。
- 在全局声明的变量在for循环之后依然存在。
//1.
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
var tmp = 'hello world';
}
}
f(); // undefined
//2.
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5
ES6的块级作用域
let实际上就是ES6对块级作用域的实现。块级作用域的出现,使广泛应用的立即执行函数表达式(IIFE)不再必要了,用let就行了。
块级作用域与函数声明
避免在块级作用域内声明函数,因为环境的差异很大,会造出意想不到的效果。
es6的块级作用域允许声明函数的规则,只在使用大括号的情况下成立。否则报错。
do表达式
这个是提案中的语法。
const命令
基本用法
const用于声明只读的常量,不允许更改其的值。
同时意味着,用const声明变量需要在声明时初始化,后则报错。
const的作用域与let相同,只在声明的块级作用域中有效。
const声明的变量不发生变量提升,存在暂时性死区。
const和let都不可重复声明同一个变量。
本质
const保证变量指向的内存地址不得改动,而不是变量的值不得改动。所以对于复合类型的数据(如对象和数组),const变量保存的是指针,不能保证它指向的数据结构是不是可变的。
所以,我们声明一个对象为常量,仍然可以为它添加属性,不过不能让它指向另外一个对象。
如果真的想将对象冻结,应该使用Object.freeze方法。
严格模式下不能添加属性,会报错;非严格模式下,添加属性的语句不起作用。
ES6声明变量的6种方法
分别是var, function, let, const, import, class。
顶层对象的属性
在es6之前。顶层变量和全局变量是等价的。
例子:
window.a = 1;
a // 1
a = 2;
window.a // 2
es6为了改变这一设计缺陷,规定var和function声明的全局变量,依旧是顶层对象的属性。let, const, class命令声明的全局变量,不属于顶层对象的属性。
例子:
var a = 1;
// 如果在 Node 的 REPL 环境,可以写成 global.a
// 或者采用通用方法,写成 this.a
window.a // 1
let b = 1;
window.b // undefined
global对象
不同运行环境下,JavaScript的global对象是不一致的。
我们可以使用this变量在取到顶层对象,但是也存在一些问题。
- 全局环境中,this会返回顶层对象。node模块和es6模块中,this返回当前模块。
- 函数里面的this,如果函数不是作为对象的方法允许,而是单独作为函数运行,this会指向顶层对象。但,严格模式下,this是undefined。
- 如果浏览器用了CSP,new Function('return this')()无法使用。