es6中let存在變數聲明提升

標籤：

最近在跟著阮一峰的es6系列文章學習es6,在let和const命令這一章中，發現了一些錯誤，特列出

一、let不存在變數提升假設let不存在變數提升，那麼在阮一峰的文章中的這段代碼代碼是正確的

function do_something() {  console.log(foo); // ReferenceError  let foo = 2;}

即程式會報referenceError的錯誤，然而實際的執行時是undefinedG:\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存在變數聲明提升