一、let和const命令
(1)let 和 var的区别
1⃣️ 声明提前问题:let不会像var一样声明提前,
2⃣️ 作用范围:let只会在代码块内部有效;var则在全局范围有效。
let非常适用于for循环:变量i
是let
声明的,当前的i
只在本轮循环有效,所以每一次循环的i
其实都是一个新的变量。
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
如果使用var声明,在全局范围内都有效,所以全局只有一个变量i
。每一次循环,变量i
的值都会发生改变,而循环内被赋给数组a
的函数内部的console.log(i)
,里面的i
指向的就是全局的i
。也就是说,所有数组a
的函数里面的i
,指向的都是同一个i
,导致运行时输出的是最后一轮的i
的值,也就是 10。
var a = [];
for (var i = 0; i < 10; i++) {
//向a这个数组中每个索引都绑定这个函数
a[i] = function () {
console.log(i);
};
}
//a数组中的第六个函数,调用
a[6](); // 10
此外,for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
//这里相当于是两个独立的i,如果上面的条件部分换成a=0也是成立的
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc
for(let i = 0; i<3; i++){
var i ="abc";
console.log(i);
};
// abc
//只会输出一次,因为var关键字已经把全局范围内的i给改变了
for(var i=0; i<3;i++){
let i ="abc";
console.log(i);
};
//abc
//abc
//abc
//这里let没办法改变var出来的i值,所以是各自独立的部分
3⃣️ 暂时性死区(tdz = temperal dead zone)
只要块级作用域存在let命令,它所声明的变量就绑定在这个区域,不受外部的影响。
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
存在全局变量tmp,但是在代码块中又用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
}
在let声明tmp之前,都属于tmp变量的死区。
console.log(typeof x);
let x; // ReferenceError
上面代码中,变量x
使用let
命令声明,所以在声明之前,都属于x
的“死区”,只要用到该变量就会报错。因此,typeof
运行时就会抛出一个ReferenceError
。
作为比较,如果一个变量根本没有被声明,使用typeof
反而不会报错。
console.log(typeof y);
//undefined
function bar(x = y, y = 2) {
return [x, y];
}
bar(); // 报错
上述代码中,x默认值等于另一个参数y,这个赋值过程中y还没有被声明,所以报错。
function bar (x=2,y=x){
return[x,y]
};
bar();//[2,2]
var x = x;// 不报错
//本质上:
var x = undefined;//变量声明+初始化为defined
x=x;//赋值
let x = x;// 报错
// ReferenceError: x is not defined
//这里初始化undefined以及赋值是同时进行的,赋值是x还没有初始化为undefined,所以报错,报错的同时会取消x的初始化
4⃣️ let不允许在相同作用域内重复声明同一个变量
// 报错
function func() {
let a = 10;
var a = 1;
}
// 报错
function func() {
let a = 10;
let a = 1;
}
function func(arg) {
let arg;
}
func() // 报错
//不能在函数内部重新声明参数,因为参数已经声明了arg,同作用域只能声明一次。
function func(arg) {
{
let arg;
}
}
func() // 不报错
//加了{}属于不同的作用域,互不影响。
二、块级作用域
(1)es5中只有全局作用域和函数作用域,这会带来很多不便:
1⃣️ 内层变量覆盖外层变量
var tmp = new Date();
//var tmp = undefined;
function f() {
console.log(tmp);
if (false) {
var tmp = 'hello world';
//这里导致变量提升,在函数f()定义前就var tmp= undefined;了,如果不使用var关键字是可以的
}
}
f(); // undefined
2⃣️ 用来计数的循环变量泄漏为全局变量
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5
循环结束后,i并没有消失,泄漏成了全局变量。
(2) 解决方法:let实际上为js增加了块级作用域。
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
//使用let最后得出的结果是5说明外层代码不受内层代码影响。如果使用var关键字,输出的则会是10.
ES6 允许块级作用域的任意嵌套,内层作用域也可以定义外层作用域同名变量。
{{{{
{let insane = 'Hello World'}
console.log(insane); // 报错
}}}};
{let ins = "hello world";
{let ins = "nihao";}
};
同时,块级作用域的出现也使得匿名立即执行函数不再必要,因为匿名IIFE的常见使用场景就是隔离变量,使得其他地方可以声明同名变量。
(3)块级作用域和函数声明
ES6 规定,块级作用域之中,函数声明语句的行为类似于let
,在块级作用域之外不可引用。
- 允许在块级作用域内声明函数。
- 函数声明类似于
var
,即会提升到全局作用域或函数作用域的头部。 - 同时,函数声明还会提升到所在的块级作用域的头部。
function f() { console.log('I am outside!'); }
(function () {
if (false) {
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
}
f();
}());
// ES5 环境
function f() { console.log('I am outside!'); }
(function () {
function f() { console.log('I am inside!'); } //注意这里函数提升了
if (false) {
}
f();
}());// I am inside!
// 浏览器的 ES6 环境下运行上述代码
function f() { console.log('I am outside!'); }
(function () {
var f = undefined; //这里只是提前声明了函数f,还没有完成赋值
if (false) {
function f() { console.log('I am inside!'); }
}
f();
}());
// Uncaught TypeError: f is not a function
考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。
// 块级作用域内部的函数声明语句,建议不要使用
{
let a = 'secret';
function f() {
return a;
}
}
// 块级作用域内部,优先使用函数表达式
{
let a = 'secret';
let f = function () {
return a;
};
}
es6的块级作用域必须有大括号,没有则不认为存在该作用域。
// 第一种写法,报错
if (true) let x = 1;
//该写法没有大括号,所以不存在块级作用域,而let只能出现在当前作用域的顶层。
if (true) {
let x = 1;
}
三、const命令
(1)基本用法
const声明一个只读常量,一旦声明,常量的值就无法再改变。这一位子,const一旦声明就必须立刻初始化,不能留到后面再赋值。
和let一样,const只在声明所在的块级作用域有效,其所声明的常量也不会有声明提升,同时也存在tdz,只能在声明的位置后使用,并且不可以重复声明。
(2)本质
const实际上保证的,并不是变量的值不变化,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const
只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。
const foo = {};
// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only
上面代码中,常量foo
储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo
指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。
如果真的想将对象冻结,应该使用Object.freeze
方法。
const foo = Object.freeze({});
// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错,因为foo指向的是一个被冻结的对象,无法添加新的属性了
foo.prop = 123;
四、顶层对象的属性
顶层对象,在浏览器环境指的是window
对象,在 Node 指的是global
对象。ES5 之中,顶层对象的属性与全局变量是等价的,也就是顶层对象的属性赋值也等价于全局变量的赋值。
ES6 为了改变这一点,一方面规定,为了保持兼容性,var
命令和function
命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let
命令、const
命令、class
命令声明的全局变量,不属于顶层对象的属性。也就是说,从 ES6 开始,全局变量将逐步与顶层对象的属性脱钩。
var a = 1;
// 如果在 Node 的 REPL 环境,可以写成 global.a
// 或者采用通用方法,写成 this.a
window.a // 1
let b = 1;
window.b // undefined
五. globalThis对象,可以在任何环境下都取到顶层对象。