記錄ES6作用域的坑

例子1

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

a(30);

實際上上面這段代碼是這麼執行的，請看下面代碼的註釋

function a(b) {
    // 實際上是這樣變量函數提升的
    // var b; // var b = 10的b變量提升
    // var b = 30; // 形式參數的b
    // var b = function() {} 函數提升的b
    console.log(b); 
    var b = 10;
    function b(){};
}

a(30);

 例子2

a(); // 能正確執行嗎
{
    function a(){}
}

console.log(a);
{
    function a(){}
}

其實上面的代碼是這麼執行的

// var a;作用域裏面的函數a在塊作用域外面是var a
{
    // a = function(){} // 在作用域裏面賦值爲function
    function a(){}
}
// 函數a在塊級作用域裏面定義，在上面訪問不了，顯示不是一個函數。但是在塊級作用域後面可以使用。證明了a是var而不是let

所以上面的代碼第一個a()報錯，而console.log(a)是undefined，因爲作用域的上面只是var a，作用域裏面才賦值爲function

 

var a = 10;
{
    a = 30;
    function a() {}
    a = 90;
}
console.log(a);

不同瀏覽器顯示結果不同，chrome、firefox是30，safari是90

別糾結了，以後都用let，不用var就好了， 這個問題不管怎麼解釋都能舉一反6來說明解釋的錯誤。只能按照主流瀏覽器的結果來解釋。

 

關注、留言，我們一起學習。

 

===============Talk is cheap, show me the code================