摘要：由于當時我本身也還不知道這一回事沒有看懂，所以就花了一些時間去搞清楚什么是及會帶來一些什么問題，本文主要是用于介紹我對的一些理解，如有問題，多謝指出。

原文鏈接：https://acrens.github.io/2017/01/22/2017-01-22-TDZ/
春節快到了，假期也快到了，空閑之余刷個微博，看見 @ruanyf 提出了一個問題與 TDZ 有關，但是貌似阮大當時還沒有意識到這個問題，多虧一些其他業內同仁提出了與 TDZ 相關；當然，以阮大的能力這都不是事。由于當時我本身也還不知道 TDZ 這一回事沒有看懂，所以就花了一些時間去搞清楚什么是 TDZ 及TDZ會帶來一些什么問題，本文主要是用于介紹我對 TDZ 的一些理解，如有問題，多謝指出。

案例一

代碼

let y = 1;
function foo(x = y, y) {
    console.log(x);
}
foo();  // ReferenceError: y is not defined

解讀

當函數存在默認參數時，且調用方法不傳任何參數，會存在三個作用域環境；

全局作用域、參數作用域、函數體作用域；

當執行 foo 函數時，參數作用域在 x = y 之后才定義 let y，注意：let 定義，所以根據 let 定義變量的作用知道 x = y 肯定會報錯；

代碼翻譯：將以上代碼翻譯之后可以按下面代碼片段閱讀更易于理解

function analysis() {
    "use strict";
    let y = 1;

    function foo() {  
        let x = arguments[0] !== (void 0) ? arguments[0] : y;   // y not defined
        let y = arguments[1];
    }
    foo();

    return {};
}

案例二

代碼

let y = 1;
function foo(x = function(){console.log(y)}, y = 2) {
    x(); // 2
    y = 3;
    x(); // 3
}
foo();
console.log(y); //1

解讀

當函數存在默認參數時，且調用方法不傳任何參數，會存在三個作用域環境；

全局作用域、參數作用域、函數體作用域；

當執行 foo 函數時，x 被申明為匿名函數變量，此時函數并未被執行，所以正常；之后定義 y 值為 2，此時調用 x() 輸出的當然是變量 y 的值，之后繼續修改 y 的值，再繼續調用 x()，輸出 y 最新值 3；當執行外部 console.log(y) 時并不能訪問內部函數變量，訪問的變量是當前域下的 y = 1 的值 1，所以輸出 1；

代碼翻譯：將以上代碼翻譯之后可以按下面代碼片段閱讀更易于理解

function analysis() {
    "use strict";
    let y = 1;

    function foo() {  
        let x = arguments[0] !== (void 0) ? arguments[0] : function() {
            console.log(y);
        };
        let y = arguments[1] !== (void 0) ? arguments[1] : 2;
        x(); // 2
        y = 3;
        x();    // 3
    }
    foo();
    console.log(y); // 1

    return {};
}

案例三

代碼

let y = 1;
function foo(x = function(){console.log(y)}) {
    let y = 3;
    x(); // 1
}
foo();

解讀

當函數存在默認參數時，且調用方法不傳任何參數，會存在三個作用域環境；

全局作用域、參數作用域、函數體作用域；

當執行 foo 函數時，x 被賦值為一個匿名函數的變量，且存在與參數作用域內，let y = 3 會被定義到函數體作用域內，屬于參數作用域的內部函數；當 x() 執行時是在函數體作用域定被調用，但是其定義是在參數作用域，所以執行環境是在參數作用域內，此時在參數作用域沒有定義 y 變量，也不能訪問內部函數 funBody 內部定義的變量 y，此時往上級函數查找是否存在 y 被定義，如果被定義則輸出其值，所以輸出最外層變量 y 的值 1；

代碼翻譯：將以上代碼翻譯之后可以按下面代碼片段閱讀更易于理解

function analysis() {
    "use strict";
    let y = 1;

    function foo() {  
        let x = arguments[0] !== (void 0) ? arguments[0] : function() {
            console.log(y);
        };

        function funBody() {
            let y = 3;
            x();
        }
        funBody();
    }
    foo();

    return {};
}

案例四

代碼

function foo(x = function(){console.log(y)}) {
    let y = 3;
    x(); // // ReferenceError: y is not defined
}
foo();

解讀

當函數存在默認參數時，且調用方法不傳任何參數，會存在三個作用域環境；

全局作用域、參數作用域、函數體作用域；

當執行 foo 函數時，x 被賦值為一個匿名函數的變量，且存在與參數作用域內，let y = 3 會被定義到函數體作用域內，屬于參數作用域的內部函數；當 x() 執行時是在函數體作用域定被調用，但是其定義是在參數作用域，所以執行環境是在參數作用域內，此時在參數作用域沒有定義 y 變量，也不能訪問內部函數 funBody 內部定義的變量 y，此時往上級函數查找是否存在 y 被定義，如果被定義則輸出其值，否則報 y 沒有被定義錯誤，此案例只是案例三的一種測試；

代碼翻譯：將以上代碼翻譯之后可以按下面代碼片段閱讀更易于理解

function analysis() {
    "use strict";
    function foo() {  
        let x = arguments[0] !== (void 0) ? arguments[0] : function() {
            console.log(y);
        };

        function funBody() {
            let y = 3;
            x();
        }
        funBody();
    }
    foo();

    return {};
}

以上核心部分在代碼翻譯部分，通過配合一下資料及個人的理解，翻譯出通俗易懂的代碼：

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let；

http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/#tdz-temporal-dead-zone-for-parameters；

https://github.com/google/traceur-compiler/issues/1604。