Javascript函数工厂代码需要了解

Question

我无法理解这段代码，特别是当“myfunc”中x的值在被调用时占用的值是多少...什么是代码行代码意味着“var multiplyBy3 = makeMultiplier（3 ）;”请注意控制台返回结果30.

// Function factory 
function makeMultiplier(multiplier) { 
    var myFunc = function (x) { 
    return multiplier * x; 
    }; 

    return myFunc; 
} 

var multiplyBy3 = makeMultiplier(3); 
console.log(multiplyBy3(10)); 

Answer 1

此代码是JavaScript的closures的一个很好的演示。

当你运行：

var multiplyBy3 = makeMultiplier(3); 

makeMultiplier被调用，它创建了一个局部变量myFunc，它的值是一个JavaScript函数。 myFunc的身体参考multiplier，它来自参数makeMultiplier(multiplier)和x，它来自函数自己的参数x。

makeMultiplier然后返回myFunc，这是因为现在范围变封闭，当它被创建，即multiplier，仍保存完好，即使makeMultiplier本身已退出。

现在，由于makeMultiplier(3)的返回值是一个函数，所以multiplyBy3现在具有该函数作为其值。因此，您现在可以拨打multiplyBy3作为常规功能，这就是下一行中会发生的情况。

console.log(multiplyBy3(10)); 

此行记录的multiplyBy3的返回值，这是multiplier * x。

x刚刚传入该函数作为其唯一参数，所以x是10。
multiplier与先前调用makeMultiplier的multiplier相同，因此multiplier为3。

因此，multiplyBy3返回3 * 10，这是30，这是您在浏览器的控制台中看到的输出。

Answer 2

我在代码中添加了一些文档来帮助理清发生了什么。

// -------------------- 
 
// A function that when executed returns a new function 
 
// -------------------- 
 
function makeMultiplier(multiplier) { 
 

 
    console.log("multiplier for this new function shall be: " + multiplier); 
 

 
    // -------------------- 
 
    // A function that takes a parameter "x" and 
 
    // returns "x" multiplied by "multiplier" 
 
    // -------------------- 
 
    var myFunc = function(x) { 
 
    console.log("multiplying " + multiplier + " * " + x); 
 
    return (multiplier * x); 
 
    }; 
 
    // -------------------- 
 

 
    return myFunc; 
 
} 
 
// -------------------- 
 

 
// -------------------- 
 
// use makeMultiplier to create a new function 
 
// -------------------- 
 
var multiplyBy3 = makeMultiplier(3); 
 
// -------------------- 
 

 
// -------------------- 
 
// use our new function 
 
// -------------------- 
 
var result = multiplyBy3(10); 
 
// -------------------- 
 

 
console.log("results in " + result);