箭头函数（这是一个参数）如何接受 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

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

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

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

Answer 2

第三个输出如何是 1 而不是 2？[...] 为什么这里的输出不同？

如果代码按编写的方式运行，则在进入函数之前评估默认参数。所以xinf = () => 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。