箭头函数（它是一个参数）如何接受 x 的值为 1 并返回它？

Question

console.log((function(x, f = () => x) {
  var x;
  var y = x;
  x = 2;
  return [x, y, f()];
})(1));

这是代码片段。这里的输出是 (3) [2, 1, 1] 第三个输出怎么是1不是2？

此外，如果我在 Scratch JS 上运行这段代码，它会打印 (3) [2, 1, 2]

为什么这里的输出不同？

我尝试在 IIFE 函数中传递第二个参数，如下所示：

console.log((function(x, f = (z) => z) {
  var x;
  var y = x;
  x = 2;
  return [x, y, f(z)];
})(1, 2));

但这会引发错误

在 chrome 控制台中输出 (3) [2, 1, 1]，但在 Scratch JS

中输出 (3) [2, 1, 2]

Answer 1

How is the third output 1 and not 2? [...] Why is the output different here?

如果代码如写的那样运行，那么默认参数在进入函数之前被求值。所以 f = () => x 中的 x 指的是函数的第一个参数，而不是函数内部定义的 var x 。并且由于 1 被传递到 IIFE，所以 1 是使用的值。为什么这里的输出不同？看起来 scratchJS 正在转译到 javascript 的旧版本。这会将代码变成如下所示：

 console.log(function (x) {
    var f = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
      return x;
    };
    var x;
    var y = x;
    x = 2;
    return [x, y, f()];
  }(1));

现在默认值由函数体内的代码处理。由于 hoisting，var x 是执行 return x 时引用的变量，而不是参数列表中的 x。在调用 f 时，该局部变量已设置为 2，因此记录了 2。

Answer 2

在第一种情况下，() => x 返回 1 因为您没有将函数作为第二个参数传递，这意味着箭头函数在您的函数外部实例化并保留其自己的上下文。函数内部的 x 被限制在不同的上下文中。

这是阴影名称变量的经典问题，名称相同但嵌套上下文不同。

在第二个示例中，您在参数中将值 2 作为函数传递，这就是它抛出错误的原因。你不能执行 2().

箭头函数（它是一个参数）如何接受 x 的值为 1 并返回它？

How is the arrow function(which is an argument), accepting the value of x as 1 and returning it?

javascript

console.log

arrow-functions

iife

hoisting