ES6 函數默認參數、TDZ以及Firefox 50.x 版本的實現

VioletJack 發布于2019-08-20 13:53 / 904人閱讀

摘要：而我們使用額外的參數指向參數作用域中的時就可以執行這里的的默認值會被賦予為而不是拋出異常，因為在從左向右初始化參數的時候已經給賦予了。

ES6 函數默認參數、TDZ以及Firefox 50.x 版本的實現從屬于 Web 前端入門與工程實踐

昨天看到阮老師發的一個微博：

筆者自己也嘗試了下，在 Chrome 中：

在 Firefox 與 Babel 中的效果：

理論上來說，ES6 中引入了 Temporal Dead Zone 的概念，即參數或者變量不可在初始化前被訪問，上述代碼中的= x賦值語句是在參數域中被執行，因此會覆蓋掉全局定義中的x，自然就無法被初始化為自身。而我們使用額外的參數指向參數作用域中的x時就可以執行：

function foo(x, y = x) { // OK
  ...
}

這里的y的默認值會被賦予為undefined而不是拋出異常，因為在從左向右初始化參數的時候已經給x賦予了undefined。而在 Babel 中，因為其將默認參數解析為了具體的值判斷，因此不存在 TDZ 問題：

// ES6
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y(); // is `x` shared?
  console.log(x); // no, still 3, not 2
}
 
// Compiled to ES5
function foo(x, y) {
  // Setup defaults.
  if (typeof y == "undefined") {
    y = function() { x = 2; }; // now clearly see that it updates `x` from params
  }
 
  return function() {
    var x = 3; // now clearly see that this `x` is from inner scope
    y();
    console.log(x);
  }.apply(this, arguments);
}

不過號稱在 FF15 版本中就實現了默認參數的 Firefox 為何會與 Babel 有一樣的表現呢？筆者截止目前還沒有確定答案，有可能是 FF50 中還沒有實現 TDZ 吧：

除此之外還有個小疑問：

function rest(b = a, ...a) {
console.log(b, a);
}

rest(undefined, 2);

上述代碼在 Chrome 中輸出為[2][2]，Firefox 中輸出undefined，直接運行 Babel 拋出異常，官方 Babel 的編譯結果為：

"use strict";

function rest() {
  var b = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : a;

  for (var _len = arguments.length, a = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
    a[_key - 1] = arguments[_key];
  }

  console.log(b, a);
}

rest(undefined, 2);

執行結果為undefined [2]

GPU云服務器云服務器函數默認參數 js函數默認參數函數的參數 js中函數參數的作用

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

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

理解ES6中的暫時死區(TDZ)

摘要：以英文名詞來說明，是時間的暫時的意義，則是死區，意指電波達不到的區域。所以可以翻為時間上暫時的無法達到的區域，簡稱為時間死區或暫時死區。以聲明的變量或常量，必需是經過對聲明的賦值語句的求值后，才算初始化完成，創建時并不算初始化。 Temporal Dead Zone(TDZ)是ES6(ES2015)中對作用域新的專用語義。TDZ名詞并沒有明確地寫在ES6的標準文件中，一開始是出現在ES...

Mike617 2019-08-20 13:58 評論0 收藏0
JS 中 TDZ 的理解

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

stackvoid 2019-08-20 13:55 評論0 收藏0
ES6 系列之 let 和 const

摘要：塊級作用域存在于函數內部塊中字符和之間的區域和塊級聲明用于聲明在指定塊的作用域之外無法訪問的變量。和都是塊級聲明的一種。值得一提的是聲明不允許修改綁定，但允許修改值。這意味著當用聲明對象時沒有問題報錯臨時死區臨時死區，簡寫為。塊級作用域的出現通過 var 聲明的變量存在變量提升的特性： if (condition) { var value = 1; } console.lo...

PascalXie 2019-08-22 17:25 評論0 收藏0
ES6簡記

摘要：圓括號問題可以使用圓括號的情況只有一種賦值語句的非模式部分，可以使用圓括號。正確正確正確上面三行語句都可以正確執行，因為首先它們都是賦值語句，而不是聲明語句其次它們的圓括號都不屬于模式的一部分。 let 和 const 命令 1.let 概念：暫時性死區（TDZ）在作用域內，let變量已經存在；并綁定該作用域：不受外界影響，外界也不可獲取let作用域以代碼塊劃分，var作用域...

renweihub 2019-08-22 15:46 評論0 收藏0
ES6系列之 let 和 const

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。這在語法上，稱為暫時性死區，簡稱。這表明函數內部的變量與循環變量不在同一個作用域，有各自單獨的作用域。系列文章系列文章地址 showImg(https://segmentfault.com/img/bVbrjjC); 為什么需要塊級作用域 ES5 只有全局作用域和函數作用域，沒有塊級作用域，這帶來很多不合...

libxd 2019-08-23 16:55 評論0 收藏0