内部重新定义的 Javascript 函数的行为差异

Question

当我在逆向工程一些JavaScript代码时，我遇到了这个函数：

function fun1() {
    const arr = ["a", "b", "c", "d", "e"];
    fun1 = function () {
        return arr;
    };
    return fun1();
}

对我来说，它看起来是多余的。代码似乎：

1. 声明一个数组 arr。
2. 在函数内部重新定义函数，使其返回 arr。
3. 使用 return fun1() 返回函数本身的结果，现在被重新定义为返回 arr，所以似乎返回 arr。

因此，我重写了函数以消除所有多余的代码：

function fun2() {
    const arr = ["a", "b", "c", "d", "e"];
    return arr;
}

然而，我惊讶地发现这两个函数的行为完全不同。

fun1() 似乎返回对 arr 的引用，而 fun2() 似乎返回 arr 的副本。

这里有一个可运行的最小可重现示例来说明差异：

// This function is redefined inside itself to return arr
function fun1() {
  const arr = ["a", "b", "c", "d", "e"];
  fun1 = function() {
    return arr;
  };
  return fun1();
}

// Why not return arr directly?
function fun2() {
  const arr = ["a", "b", "c", "d", "e"];
  return arr;
}

// But the result is different...
let test_fun_1 = fun1();

test_fun_1.pop();

test_fun_1 = fun1();

console.log("Logging test_fun_1");

console.log(test_fun_1); // ["a", "b", "c", "d"]

let test_fun_2 = fun2();

test_fun_2.pop();

test_fun_2 = fun2();

console.log("Logging test_fun_2");

console.log(test_fun_2); // ["a", "b", "c", "d", "e"]

// What is this magic?

看起来像是发生了魔法...

fun1() 和 fun2() 之间有什么区别？

Answer 1

当第一次调用时，您的fun1()函数重新定义了（相对）全局的fun1符号。它将原始函数更改为局部内部函数，该函数封闭了数组。因此，只涉及一个数组，即第一次调用fun1()时创建的数组。

另一方面，您的fun2()在每次调用时都创建一个全新的数组。

如果您更改fun1()，以便将内部函数分配给一个在本地声明的fun1变量，它将与fun2()的工作方式相同。