ES6 函数默认参数、TDZ以及Firefox 50.x 版本的实现

VioletJack 发布于2019-08-20 13:53 / 807人阅读

摘要：而我们使用额外的参数指向参数作用域中的时就可以执行这里的的默认值会被赋予为而不是抛出异常，因为在从左向右初始化参数的时候已经给赋予了。

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中函数参数的作用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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