JavaScript Funktion Factory Code muss verstehen

Question

Ich kann diesen Code nicht verstehen, vor allem, wie Wert von x in "myfunc" den Wert aufnimmt, wenn aufgerufen .... was bedeutet diese Zeile des Codes bedeutet "var multiplyBy3 = makeMultiplier (3) Bitte beachten Sie Konsole Renditen führen 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

Dieser Code eine gute Demonstration von JavaScript ist closures.

Wenn Sie laufen:

var multiplyBy3 = makeMultiplier(3); 

makeMultiplier genannt wird, die eine lokale Variable erzeugt myFunc, dessen Wert eine Funktion JavaScript. myFunc 's Körperreferenzen multiplier, die von dem Parameter zu makeMultiplier(multiplier) und x kommt, die von der Funktion eigenen Parameter x kommt.

makeMultiplier kehrt dann myFunc, die jetzt eine Schließung, da die Variable im Gültigkeitsbereich befindet, wenn es erstellt wurde, nämlich multiplier, ist nach wie vor intakt, obwohl makeMultiplier selbst verlassen hat.

Nun, da der Rückgabewert makeMultiplier(3) eine Funktion war, hat multiplyBy3 jetzt diese Funktion als seinen Wert. So können Sie nun multiplyBy3 als reguläre Funktion aufrufen, was in der nächsten Zeile geschieht.

console.log(multiplyBy3(10)); 

Diese Zeile protokolliert den Rückgabewert von multiplyBy3, die multiplier * x war.

x wurde nur als einziger Parameter an die Funktion übergeben, also x ist 10.
multiplier ist das gleiche wie die multiplier aus dem vorherigen Anruf zu makeMultiplier, so multiplier ist 3.

So gibt multiplyBy33 * 10 zurück, die 30 ist, die die Ausgabe ist, die Sie in der Konsole Ihres Browsers protokolliert sehen.

Answer 2

Ich habe dem Code eine kleine Dokumentation hinzugefügt, um zu verdeutlichen, was vor sich geht.

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