网站搜索

javascript - 在 Chrome 开发者工具中返回一个函数


这个问题可能在其他地方已经有人回答过,但我甚至不知道该如何开始搜索答案。我是 JavaScript 新手,所以这个问题对我来说很难理解。

给定以下代码:

function multiple(n) {
    function f(x) {
        return x * n;
    }
    return f;
}
var triple = multiple(3);
var quadruple = multiple(4);

当我在控制台中输入以下内容时:

console.log(triple(5));

我得到我所期望的,也就是 15。同样地,对于任何数字,它都会被三倍(如果我使用第二个函数则会被四倍)。

但是当我在控制台输入 triple 时,我得到以下代码:

f(x) {
    return x * n;
}

控制台不应该返回...

f(x) {
    return x * 3;
}

...因为3通过以下代码被编码进函数中:

var triple = multiple(3);

答案#1

3 并没有被硬编码到函数中。f 的代码引用的是变量 n,而不是数字 3。在你的代码中,恰好没有办法修改 n,但可以想象一些代码中存在修改 n 的方法:

function multiple(n) {
    function f(x) {
        return x * n;
    }
    function modifyN(newN) {
        n = newN;
    }
    return { f: f, modifyN: modifyN };
}
var resultFor3 = multiple(3);
var triple = resultFor3.f;
var modifyTripleN = resultFor3.modifyN;

正如你所看到的,n 并不是硬编码的;它与其他变量没有什么不同。在你的具体例子中,multiple 结束后无法修改 n,但这并不意味着通过调用 multiple 创建的闭包中的值以任何方式是“硬编码”的。

答案#2

输入 triple 仅仅会显示你函数的 源代码。

因为3被通过以下代码编码进了函数

那是不正确的说法。你并没有更改函数的源代码。要更改源代码,你必须重新定义整个函数。你所做的只是传入一个参数。控制台给出的输出是正确的。

当你将一个参数传递给函数时,从高层次来看,在运行时它只是查找存储在该变量内存地址中的值(或者类似的东西)。但它并没有重写函数的源代码。