Javascript関数のファクトリコードが理解を必要とする

Question

このコードは理解できません。特に、 "myfunc"のxの値が呼び出されたときの値をどのように取るかはわかりません....コードの行は "var multiplyBy3 = makeMultiplier ）; "コンソールに結果が返ってくるのでご注意ください。

// 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が呼び出され、その値がJavaScript関数であるローカル変数myFuncを作成します。 myFuncの本体参照multiplierは、makeMultiplier(multiplier)のパラメータから得られ、xは、関数の独自のパラメータxからのものです。

makeMultiplierその後は今それが作成された範囲内の変数ので閉鎖されており、myFuncを返し、すなわちmultiplierは、makeMultiplier自体が終了しているにもかかわらず、依然として無傷です。

ここで、戻り値makeMultiplier(3)が関数であったため、multiplyBy3はその値としてその関数を持つようになりました。したがって、multiplyBy3を通常の関数として呼び出すことができます。これは次の行で行われます。

console.log(multiplyBy3(10)); 

この行はmultiplier * xたmultiplyBy3の戻り値を、ログに記録します。

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);