ES6之let命令詳解


let與塊級作用域 

{    
  var foo='foo'; let bar='bar'; } console.log(foo,'var'); //foo var
console.log(bar ,'bar');//Uncaught ReferenceError: bar is not defined

在代碼中,使用var申明的變量在代碼塊外面能被識別,但是let命令卻不能被識別,這樣就實現了js的塊級作用域,我們在使用條件語句 循環語句等就會不擔心變量污染的問題了,以下是兩種寫法等對比:

es6:

for (let i = 0; i < a.length; i++) {
    let x = a[i]
    …
}
for (let i = 0; i < b.length; i++) {
    let y = b[i]
    …
}

let callbacks = []
for (let i = 0; i <= 2; i++) {
    callbacks[i] = function () { return i * 2 }
}
callbacks[0]() === 0
callbacks[1]() === 2
callbacks[2]() === 4

es5:

var i, x, y;
for (i = 0; i < a.length; i++) {
    x = a[i];
    …
}
for (i = 0; i < b.length; i++) {
    y = b[i];
    …
}

var callbacks = [];
for (var i = 0; i <= 2; i++) {
    (function (i) {
        callbacks[i] = function() { return i * 2; };
    })(i);
}
callbacks[0]() === 0;
callbacks[1]() === 2;
callbacks[2]() === 4;

在{}用let聲明的變量只有在{}內是有效的   

let不會有變量提升

熟悉js開發的都知道函數有兩種聲明方式

 

a(); // 'a'
b(); // 報錯不是一個函數 其實是undefined
function a(){
   console.log('a');
}

var b=function(){
   console.log('b');
}

 

這兩種方式js解析順序是不一樣的, 首先函數a會被js加載然后執行  var b ;至於b是什么數據會等第二批執行,也就是正常按照從上到下執行代碼,在執行b()的時候還是未初始化的狀態但是並沒有報錯因為var已經被優先執行了 這種就是變量提升,此時我們修改下代碼

  a();  // 'a'
  b(); // b is not defined
  function a(){
   console.log('a'); 
  }

  let b=function(){
   console.log('b');
  }

雖然仍是報錯但是明顯提示不存在b變量了,所以使用了let之后就不會優先執行了也會回歸“第二批”執行的隊伍中,function a(){} 依然是“第一批”優先執行的代碼。

 

變量綁定和不可重新定義

js是存在作用域鏈的,在特定作用域下只能獲取同級或者高層級的變量;但是let存在變量綁定行為,不遵循作用域鏈;

     let a=1; 
     (function (){
       a=2; //a is not defined
       let a;
       console.log(a);
     }());

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

我們可以這樣理解,在當前執行的作用域內如果沒有對變量定義 則會從高層級級獲取,如果已經存在則封閉當前作用域不再考慮高層級是否聲明了該變量;

在相同作用域內,let是不能重復聲明同一個變量的;但是var則不在乎聲明多少次,永遠都是后者替換前者;

      var foo=123;
      var foo=456;
      console.log(foo);   //456

      let bar=123;
      let bar=456; //Identifier 'bar' has already been declared
      console.log(bar);

有了塊級作用域我們再也不用寫匿名函數來進行作用域封閉了,以前你可能是這樣寫:

(function () {
    var foo = function () { return 1; }
    foo() === 1;
    (function () {
        var foo = function () { return 2; }
        foo() === 2;
    })();
    foo() === 1;
})();

但是現在不用這樣麻煩了,你完全可以這樣寫: 

{
    function foo () { return 1 }
    foo() === 1
    {
        function foo () { return 2 }
        foo() === 2
    }
    foo() === 1
}

參考了了阮一峰的介紹 做了一些簡化和自己的例子 歡迎補充~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM