摘要：由于當(dāng)時(shí)我本身也還不知道這一回事沒(méi)有看懂，所以就花了一些時(shí)間去搞清楚什么是及會(huì)帶來(lái)一些什么問(wèn)題，本文主要是用于介紹我對(duì)的一些理解，如有問(wèn)題，多謝指出。

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

案例一

代碼

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

解讀

當(dāng)函數(shù)存在默認(rèn)參數(shù)時(shí)，且調(diào)用方法不傳任何參數(shù)，會(huì)存在三個(gè)作用域環(huán)境；

全局作用域、參數(shù)作用域、函數(shù)體作用域；

當(dāng)執(zhí)行 foo 函數(shù)時(shí)，參數(shù)作用域在 x = y 之后才定義 let y，注意：let 定義，所以根據(jù) let 定義變量的作用知道 x = y 肯定會(huì)報(bào)錯(cuò)；

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

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

解讀

當(dāng)函數(shù)存在默認(rèn)參數(shù)時(shí)，且調(diào)用方法不傳任何參數(shù)，會(huì)存在三個(gè)作用域環(huán)境；

全局作用域、參數(shù)作用域、函數(shù)體作用域；

當(dāng)執(zhí)行 foo 函數(shù)時(shí)，x 被申明為匿名函數(shù)變量，此時(shí)函數(shù)并未被執(zhí)行，所以正常；之后定義 y 值為 2，此時(shí)調(diào)用 x() 輸出的當(dāng)然是變量 y 的值，之后繼續(xù)修改 y 的值，再繼續(xù)調(diào)用 x()，輸出 y 最新值 3；當(dāng)執(zhí)行外部 console.log(y) 時(shí)并不能訪問(wèn)內(nèi)部函數(shù)變量，訪問(wèn)的變量是當(dāng)前域下的 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();

解讀

當(dāng)函數(shù)存在默認(rèn)參數(shù)時(shí)，且調(diào)用方法不傳任何參數(shù)，會(huì)存在三個(gè)作用域環(huán)境；

全局作用域、參數(shù)作用域、函數(shù)體作用域；

當(dāng)執(zhí)行 foo 函數(shù)時(shí)，x 被賦值為一個(gè)匿名函數(shù)的變量，且存在與參數(shù)作用域內(nèi)，let y = 3 會(huì)被定義到函數(shù)體作用域內(nèi)，屬于參數(shù)作用域的內(nèi)部函數(shù)；當(dāng) x() 執(zhí)行時(shí)是在函數(shù)體作用域定被調(diào)用，但是其定義是在參數(shù)作用域，所以執(zhí)行環(huán)境是在參數(shù)作用域內(nèi)，此時(shí)在參數(shù)作用域沒(méi)有定義 y 變量，也不能訪問(wèn)內(nèi)部函數(shù) funBody 內(nèi)部定義的變量 y，此時(shí)往上級(jí)函數(shù)查找是否存在 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();

解讀

當(dāng)函數(shù)存在默認(rèn)參數(shù)時(shí)，且調(diào)用方法不傳任何參數(shù)，會(huì)存在三個(gè)作用域環(huán)境；

全局作用域、參數(shù)作用域、函數(shù)體作用域；

當(dāng)執(zhí)行 foo 函數(shù)時(shí)，x 被賦值為一個(gè)匿名函數(shù)的變量，且存在與參數(shù)作用域內(nèi)，let y = 3 會(huì)被定義到函數(shù)體作用域內(nèi)，屬于參數(shù)作用域的內(nèi)部函數(shù)；當(dāng) x() 執(zhí)行時(shí)是在函數(shù)體作用域定被調(diào)用，但是其定義是在參數(shù)作用域，所以執(zhí)行環(huán)境是在參數(shù)作用域內(nèi)，此時(shí)在參數(shù)作用域沒(méi)有定義 y 變量，也不能訪問(wèn)內(nèi)部函數(shù) funBody 內(nèi)部定義的變量 y，此時(shí)往上級(jí)函數(shù)查找是否存在 y 被定義，如果被定義則輸出其值，否則報(bào) y 沒(méi)有被定義錯(cuò)誤，此案例只是案例三的一種測(cè)試；

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

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 {};
}

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

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。