ES6中let和var的区别

2018-12-10 本文已影响0人安静的牛蛙

let是在ES6中新引入的关键字，用来改进var带来的各种问题。
let和var相比，大致有下面几个方面的不同：

作用域
通过let定义的变量，作用域是在定义它的块级代码以及其中包括的子块中，并且无法在全局作用域添加变量。
通过var定义的变量，作用域为包括它的函数作用域或者全局作用域。

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

let的block scope的特性，可以用来实现class的私有成员。在let之前，一般是通过闭包的特性实现的。代码如下：

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"}

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

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定义的变量，在同一个作用域内，重复声明，在生成执行上下文的时候，会无视后面的声明。

// 报错
(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定义的变量虽然经历了提升，但在没有执行到初始化它的代码前，该变量并没有被初始化，如果此时访问的话，会被置为ReferenceError错误。从代码块开始到执行到let变量初始化完毕这段时间，let变量已经被声明，但不可访问。这段时间被成为临时死区。下面是几个典型的展示临时死区问题的代码：

// 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]});

Tip：需要注意的是，和let一起引入的const同样拥有“临时死区”的特性，也一样无法重复声明。

ES6中let和var的区别

猜你喜欢

热点阅读