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

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]