ES6 系列二之 let 和 const

1. let

ES6新增了 let 命令,用来声明块级作用域变量,学习过其他语言的同学不会陌生,在很多语言中,声明一般都是块级声明:

块级声明指的是该声明的变量无法被代码块外部访问。块作用域,又被称为词法作用域(lexical scopes),可以在如下的条件下创建:

  • 函数内部
  • 在代码块(即 { 和 })内部

块级作用域是很多类C语言的工作机制,ECMAScript 6 引入块级声明的目的是增强 JavaScript 的灵活性,同时又能与其它编程语言保持一致。

而JavaScript通过 var 声明的变量是函数级作用域,即在函数的范围内起作用,如果没有在函数中声明,则是全局变量,这样就会出现很多问题,如无法重用变量名,污染全局变量等。

{
  let a  = 1;
  var b = 1;
}
console.log(b);
console.log(a);

执行程序,会出现a is no defined的错误,因为 a 是定义在{}内的,在大括号外面就是没有定义的,而通过var声明的 b 则是全局变量,可以在{}外访问,输出结果为1

2. const

const声明一个只读的常量,一旦声明,常量的值就不能改变。

const P = 1.12;
P = 1.2; // TypeError: Assignment to constant variable

const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后再赋值。

const foo; // SyntaxError: Missing initializer in const declaration

const 的本质

const 实际上不能确定所声明变量的值不会改变,而是变量指向的内存地址不会改变。对于基本数据类型(数值,字符串,布尔值等),这不会出现什么问题,值就保存在变量指向的内存中。但是对于复合类型的数据(数组和对象),内存地址不变不代表它的值不会改变,比如我们向数组中增加一个值,变量所代表的内存不变,但是实际上数组的内容已经发生了改变。例如,这段代码能正常运行:

const array = [1, 2];
array.push(3);
console.log(array); // 1, 2, 3

上面的代码中,变量array存储的是一个地址,这个地址指向一个数组。不可变的是只是这个地址,即不能给array重新赋值,而不是地址的内容,也就是array 所代表的数组是可变的。

const array = [1, 2];
array = 1; // TypeError: Assignment to constant variable.

3. let 和 const 的注意事项

1. 不存在变量提升(No Hoisting)

首先,我们要明白变量提升的概念:通过var声明的变量会存在变量提升的现象,即变量可以在声明之前使用。JavaScript 仅提升声明,而不是初始化,提升声明的变量的值为 undefined。看下面的代码:

console.log(a); // undefined
var a = 1; 
console.log(a); // 1

这段代码的作用相当于:

var a;
console.log(a); // undefined
a = 1; 
console.log(a); // 1

看了这两段代码,我们应该能够理解变量提升的含义了。虽然 JavaScript 存在变量提升的行为,但是不建议使用,还是先定义后使用的行为比较符合逻辑。

变量提升的内在意义:

Hoisting 真正发生的是在编译阶段将变量和函数声明放入内存中,但仍然保留在编码中键入的位置。JavaScript 在执行任何代码段之前,将函数声明放入内存中的优点之一是,这允许你可以在你的代码中使用一个函数,在声明该函数之前。

了解了变量提升之后,我们就可以理解 letconst 的不存在变量提升是什么意思了:letconst声明的变量只能在声明后使用,在声明前使用会报错:

console.log(a); // 报错 ReferenceError
let a = 1;

2. 暂时性死区(Temporal dead zone)

咋一看这个概念似乎很难理解,其实并不难掌握。首先,我们先看看 ES5 中作用域是如何工作的:

var x = 'outer'; 
(function() { 
  console.log(x);
  var x = 'inner';
}());

你觉得执行上面的代码会输出什么?根据上面提到的变量提升,不难得出正确答案是 undefined。可能有人会比较疑惑,为什么不是输出outer呢?因为在 JavaScript 中,每个函数都有自己的执行环境,当获取一个变量的值时,会优先在当前执行环境中查找,当找不到时,才会到更深层的执行环境中去查找。

理解了上面的代码之后,也就很容易理解暂时性死区的概念了。类比 var 的情况, let 声明的变量是块级作用域,而且不存在变量提升的情况,当出现下面这种情况时会发生什么呢:

{
  console.log(a);  
  let a = 1;
}

没错,会出现错误,也就是说如果在一个块级作用域中用let声明了一个变量,那么在 let 声明之前是不能访问此变量的,否则会报错。这也就是暂时性死区的概念:

指在变量的块级作用域中,只有声明并赋值后,变量才可以正常使用。

ES6 规定暂时性死区和 letconst 语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。这样的错误在 ES5 是很常见的,现在有了这种规定,避免此类错误就很容易了。

3. 不允许重复声明

这个很好理解,letconst 不允许在相同的作用域内重复声明同一个变量,否则会报错。

function func() {
  let a = 10;
  let a = 1; // 报错
}

参考文章

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

推荐阅读更多精彩内容