ES6 變量和函數參數的臨時死區

entner 發布于2019-08-26 10:15 / 1401人閱讀

摘要：但是值得注意的是，由和定義的變量還擁有一個會讓人恨容易犯錯的特性臨時死區，下文以簡稱。但是擁有的不僅是變量，函數的參數也有，接下來就一一講解。

ES6的第一章便是講新增了let和const這兩個變量，可以用于定義塊級作用域的變量。相對于于var定義的變量，由let和const定義的變量作用域不會被提升。但是值得注意的是，由let和const定義的變量還擁有一個會讓人恨容易犯錯的特性：臨時死區（Temporal Dead Zone，下文以TDZ簡稱）。但是擁有TDZ的不僅是變量，函數的參數也有，接下來就一一講解。
一：變量的臨時死區
例1：在變量的作用域外引用變量

function testTdz() {
    console.log(colour);
    if(1 === 1){
        let colour = "blue";
    }
}
testTdz(); //undefined

例2：在變量的臨時死區內引用變量

function testTdz() {
    if(1 === 1){
        console.log(colour);
        let colour = "blue";
    }
}
testTDZ(); // Uncaught ReferenceError: Cannot access "colour" before initialization

例3: 在變量作用域且初始化之后引用變量

function testTdz() {
    if(1 === 1){
        let colour = "blue";
        console.log(colour);
    }
}
testTdz();//"blue"

以上的三個例子，例2展示了在變量的臨時死區內引用變量會導致拋出錯誤。再結合這三個例子我可以準確地定義出變量的臨時死區的區域為：

1: 在變量的作用域內
2: 在變量的定義之前

如果以一張圖來表示的話，就是下圖所示，框起來的區域：

這里需要特別注意的是，我們在if表達式里面定義colour變量，那么它的作用域就只是在if表達式的大括號里面。在testTdz()方法內，if表達式大括號外的區域不是colour的作用域，那就一定不是它的臨時死區，在這些地方引用colour變量，是不會造成拋錯的，只是變量的值是undefined，這也是上面的例1所展示的道理。

二：函數參數的臨時死區
我們在定義函數參數的時候，其實在背后，這些參數就如同用let定義的變量一樣，擁有自己的作用域。這些參數變量在初始化之前，如果被引用，也會拋出錯誤。當我們調用函數，會通過參數的傳值或者默認值初始化這些參數。為了理解函數參數的臨時死區特性，我們先來看一個正確使用函數參數的例子：
例1:

function testFunctionTdz(first, second = first + 1) {
    console.log(`first: ${first} || second: ${second}`);
}
testFunctionTdz(1); //first: 1 || second: 2
testFunctionTdz(1, 1); //first: 1 || second: 1

當我們執行testFunctionTdz(1)的時候，實際上背后的執行代碼是：

let first = 1;
let second = first + 1; // 1 + 1

當我們執行testFunctionTdz(1, 1) 的時候，實際執行的代碼是：

let first = 1;
let second = 1;

所以上面的兩個調用都可以正常地調用下去。接下來我們稍微改造一下上面的代碼，看一個在參數的臨時死區引用變量，從而導致程序拋錯的例子：

function testFunctionTdz(first = second + 1, second) {
    console.log(`first: ${first} || second: ${second}`);
}
testFunctionTdz(1, 1); // first: 1 || second: 1
testFunctionTdz(undefined, 1); // Uncaught ReferenceError: Cannot access "second" before initialization

在這個例子，當我們執行testFunctionTdz(undefined, 1)時，背后的代碼實際上是：

let first = second; //在這個區域，就是變量second的臨時死區，所以會導致程序拋錯
let second = 1;

以上就是變量和函數參數的臨時死區的內容，自認為應該是講得十分清楚了。

GPU云服務器云服務器 php數組和函數參數 php中函數和參數 js調用變量和函數函數的參數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105874.html

ES6系列文章塊級作用域

摘要：聲明之函數作用域和全局作用域。塊級作用域不能重復聲明臨時性死區等特性用來解決變量存在的種種問題。塊級作用域終于在外面訪問不到了。一些常量聲明使用聲明的變量名全部大寫。 ES5之前javascript語言只有函數作用域和全局作用域，使用var來聲明變量，var聲明的變量還存在變量提升使人困惑不已。我們先來復習一下ES5的var聲明，再對比學習let和const 。 var var聲明之函...

趙連江 2019-08-21 16:53 評論0 收藏0
《深入理解ES6》筆記——函數（3）

摘要：錯誤的寫法錯誤的寫法中的構造函數新增了支持默認參數和不定參數。箭頭函數的簡單理解箭頭函數的左邊表示輸入的參數，右邊表示輸出的結果。但是有了尾調用優化之后，遞歸函數的性能有了提升。作為前端切圖仔，越發覺得自己離不開函數了。說到JavaScript函數，腦子里都是匿名函數、普通函數、閉包函數、構造函數......然后還能說出一大堆函數的概念。如果你達到這個水平，那么函數對你來說沒有難度...

DoINsiSt 2019-08-20 18:04 評論0 收藏0
ES6系列---函數

摘要：形參默認值不再影響對象當使用默認參數值時，對象的行為與以往有所不同。具有方法的函數被統稱為構造函數。當調用函數的方法時，被賦值為新創建對象實例如果調用方法，則的值為。由于JavaScript開發者多年的不斷抱怨和呼吁，ES6終于大力度地更新了函數特性，在ES5基礎上進行了許多改進。函數形參的默認值 ES5形參默認值的實現在ES5中，你很可能通過以下這種方式為函數賦予默認值： fu...

AJie 2019-08-20 18:58 評論0 收藏0
深入理解ES6筆記（一）塊級作用域綁定

摘要：和都能夠聲明塊級作用域，用法和是類似的，的特點是不會變量提升，而是被鎖在當前塊中。聲明常量，一旦聲明，不可更改，而且常量必須初始化賦值。臨時死區臨時死區的意思是在當前作用域的塊內，在聲明變量前的區域叫做臨時死區。主要知識點有：var變量提升、let聲明、const聲明、let和const的比較、塊級綁定的應用場景showImg(https://segmentfault.com/img...

馬忠志 2019-08-23 10:58 評論0 收藏0