ES6-let和var的区别

let是在ES6中新引入的关键字,用来改进var带来的各种问题。 let和var相比,大致有下面几个方面的不同: 作用域 通过let定义的变量,作用域是在定义它的块级代码以及其中包括的子块中,并且无法在全局作用域添加变量。通过var定义的变量,作用域为包括它的函数作用域或者全局作用域。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function varTest() {
var x = 1;
if (true) {
var x = 2; // same variable!
console.log(x); // 2
}
console.log(x); // 2
}

function letTest() {
let x = 1;
if (true) {
let x = 2; // different variable
console.log(x); // 2
}
console.log(x); // 1
}
// let 无法在全局作用域中定义变量
var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

class的私有成员。

在let之前,一般是通过闭包的特性实现的。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var Thing = {}
// block scope
{
let counter = 1
Thing = function () {
this.name = 'something' // 创建公共成员
}
Thing.prototype.showPublic = function () {
return this.name
}
Thing.prototype.showPrivate = function () { // counter变为了私有成员,只能通过showPrivate进行访问
counter ++
return counter
}
}
var thing = new Thing()
console.log(thing.name) // something
console.log(thing.showPublic()) // something
thing.name = 'otherthing'
console.log(thing.showPublic()) // otherthing
console.log(thing.showPrivate()) // 2
console.log(thing) // Thing {name: "otherthing"}

我们可以和之前使用闭包的方法进行比较下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var Thing = (function() {
var counter = 1;
return {
name: 'something',
showPublic: function () {
return this.name
},
showPrivate: function () {
counter++
return counter
}
}
})();

var thing = Thing
console.log(thing.name) // something
console.log(thing.showPublic()) // something
thing.name = 'otherthing'
console.log(thing.showPublic()) // otherthing
console.log(thing.showPrivate()) // 2
console.log(thing) // Thing {name: "otherthing"}

两个的差异,在于一个使用了property,通过new创建新对象。一个是直接返回一个对象。后面要重新看下原型链的问题,再对其总结下。

重复声明

通过let定义的变量,在同一个作用域内,不可以重复声明。 通过var定义的变量,在同一个作用域内,重复声明,在生成执行上下文的时候,会无视后面的声明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 报错
(function () {
let a = 10;
var a = 1;
console.log(a)
})()
// 报错
(function () {
let a = 10;
let a = 1;
console.log(a)
})()
// 报错
(function () {
var a = 10;
var a = 1;
console.log(a) // 1
})()

需要注意,当在switch-case语句中,如果case语句没有使用{}包括,则视为同一个作用域。

临时死区引起的提升等问题

我们知道在代码执行之前,会先扫描所有域内的var声明的变量,将其先进行初始化为undefined,然后再执行代码,也就是所谓的“提升”现象。 但对于let声明的变量而言,则有所不同。在代码执行之前的扫描,同样也会对let变量进行“提升”,但并没有将其置为undefined。let定义的变量虽然经历了提升,但在没有执行到初始化它的代码前,该变量并没有被初始化,如果此时访问的话,会被置为错误。从代码块开始到执行到let变量初始化完毕这段时间,let变量已经被声明,但不可访问。这段时间被成为临时死区。下面是几个典型的展示临时死区问题的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// let变量的作用域为function scope
function do_something() {
console.log(bar); // undefined
console.log(foo); // ReferenceError
var bar = 1;
let foo = 2;
}
// let变量的作用域为整段代码,
// prints out 'undefined'
console.log(typeof undeclaredVariable); // typeof对于未声明的变量返回undefined
// results in a 'ReferenceError'
console.log(typeof i);
let i = 10;
// let 变量为block scope,在初始化时使用,依然会视为临时死区,只有在初始化执行完后才可以使用
function test(){
var foo = 33;
if (true) {
let foo = (foo + 55); // ReferenceError
}
}
test();
// let 变量在for的block scope内进行了声明,n.a对应的是在本地作用域中的let变量n。在未初始化前,通过n.a进行了访问了n,因此报错
function go(n) {
// n here is defined!
console.log(n); // Object {a: [1,2,3]}

for (let n of n.a) { // ReferenceError
console.log(n);
}
}

go({a: [1, 2, 3]});

结论

在客户端不支持的情况下尽量使用babel进行转译,负责要使用符合规范的var,在服务器端尽量使用let和count

  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2020 翟天野

请我喝杯咖啡吧~