ES6中let和var的区别

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同样拥有“临时死区”的特性,也一样无法重复声明。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容