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

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6 函数默认参数、TDZ以及Firefox 50.x 版本的实现脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

ES6 函数默认参数、TDZ以及Firefox 50.x 版本的实现 从属于 Web 前端入门与工程实践

昨天看到阮老师发的一个微博

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

笔者自己也尝试了下,在 Chrome 中:

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

在 Firefox 与 Babel 中的效果:

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

理论上来说,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 吧:

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

除此之外还有个小疑问:

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]

脚本宝典总结

以上是脚本宝典为你收集整理的ES6 函数默认参数、TDZ以及Firefox 50.x 版本的实现全部内容,希望文章能够帮你解决ES6 函数默认参数、TDZ以及Firefox 50.x 版本的实现所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。