码迷,mamicode.com
首页 > 其他好文 > 详细

es6中let存在变量声明提升

时间:2015-09-04 12:33:29      阅读:472      评论:0      收藏:0      [点我收藏+]

标签:

最近在跟着阮一峰的es6系列文章学习es6,在let和const命令这一章中,发现了一些错误,特列出

一、let不存在变量提升
假设let不存在变量提升,那么在阮一峰的文章中的这段代码代码是正确的
function do_something() {
  console.log(foo); // ReferenceError
  let foo = 2;}
即程序会报referenceError的错误,然而实际的执行时是undefined
G:\PHPDemo\system\content\js>babel-node test.js
undefined
 
接着我们来看一段代码,因为存在变量提升,下面这行代码会输出 undefined
console.log(x);var x=5;

而同样的下面的这段代码也会输出undefined

console.log(x);let x=5;

可见let确实会出现变量提升的情况,然后我们再来看一段从阮一峰es6系列文章复制过来的一段示例代码 详见http://es6.ruanyifeng.com/#docs/let

if (true) {
  // TDZ开始
  tmp = ‘abc‘; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

将该代码通过babel编译为es5后的代码如下: 

‘use strict‘;

if (true) {
    // TDZ开始
    _tmp = ‘abc‘; //
    console.log(_tmp); // abc

    var _tmp = undefined; // TDZ结束
    console.log(_tmp); // undefined

    _tmp = 123;
    console.log(_tmp); // 123
}
并不是输出ReferenceError这些错误, 并且我们看到实际的编译情况是let tmp变为了 var _tmp=undefined;这更加证明了let编译后的本质是var 声明的变量,既然是var声明的变量,那么必然会有变量提升。
 
然后我们把这段代码改下,给外面加上个全局变量tmp如下:
var tmp=‘dev‘;
if (true) {
    console.log(tmp);
    let tmp;
    console.log(tmp);
    tmp = 123;
    console.log(tmp);
}
这段代码会输出 dev,undefined,123吗还是会输出ReferenceError,undefined,123?
然而并不是,其实他真正输出的是酱紫的
undefined,undefined,123
然后我们再来看下生成的es5代码 
‘use strict‘;

var tmp = ‘dev‘;
if (true) {
    console.log(_tmp);
    var _tmp = undefined;
    console.log(_tmp);
    _tmp = 123;
    console.log(_tmp);
}
啧啧,在块级作用域中声明了let其本质是在其中声明一个新的变量统治自己的块级作用域,你外面"相同的变量"(es6下)都不能进入到我的地盘。
最后再小结一下let的知识吧
1、let拥有块级作用域
2、let在块级作用域中存在变量提升
3、不能在同一作用域中(函数作用域和块级作用域)用let声明相同的变量
 
ps:由于很多关于es6的书籍和相关文章都是在es6正式发布之前就尝鲜的,难免会有些错误,所以参考书的同时还是多多动手实践为好,不要掉坑

  

es6中let存在变量声明提升

标签:

原文地址:http://www.cnblogs.com/3sss/p/4781533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!