Heim > Artikel > Web-Frontend > Grundlegende Verwendung von JavaScript-Abschlussfunktionen und Lösungen für aufgetretene Probleme
Der Inhalt dieses Artikels befasst sich mit der grundlegenden Verwendung von JavaScript-Abschlussfunktionen und den Lösungen für aufgetretene Probleme. Ich hoffe, dass er für Sie hilfreich ist.
Während des Interviews wurde ich immer gefragt, was ein Abschluss ist. Mir war das vorher egal, geschweige denn, dass ich es zusammenfassen würde sind Funktionen, die
Variableninnerhalb anderer Funktionen lesen können. Im Wesentlichen ist der Abschluss also eine Brücke, die das Innere der Funktion mit der Außenseite der Funktion verbindet. (1) Die grundlegendste Anwendung der Schließung:
少废话,上代码 还是<<javascript高级程序设计>>的栗子,
function createComparisonFunction(propertyName) { return function(object1, object2) { var value1 = object1[propertyName]; var value2 = object2[propertyName]; if(value1 < value2) { return -1; } else if(value1 > value2) { return 1; } else { return 0; } }; } var compare = createComparisonFunction("name"); var result = compare({ name: "Nicholas" }, { name: "Greg" });
Die zurückgegebene anonyme Funktion ist eine Schließungsfunktion , das aktive Objekt in dieser anonymen Funktion, das auf die externe Funktion zugreift, ist der Parameter propertyName. Da diese anonyme Funktion die externe Bereichskette einschließt (dies kann auch so verstanden werden: Die Vergleichsfunktion enthält das aktive Objekt und das globale Variablenobjekt der Funktion
createComparisonFunction()), kann die zurückgegebene anonyme Funktion immer auf ihre externen zugreifen propertyName und globale Variablen.(2) Die durch den Abschluss referenzierten externen Variablen werden aufgrund der Zerstörung des Bereichs, in dem sie sich befinden, nicht zerstört.
Da in der zurückgegebenen Abschlussfunktion auf das aktive Objekt der externen Funktion verwiesen wird, also Das aktive Objekt in createComparisonFunction() (d. h. propertyName) wird nach der Ausführung von createComparisonFunction() nicht zerstört. Denn obwohl createComparisonFunction nach der Ausführung die Bereichskette in seiner Ausführungsumgebung zerstört, wird sein aktives Objekt immer noch von der Abschlussfunktion referenziert und in den Bereich der Ausführungsumgebung der anonymen Funktion platziert
( 2) Nebenwirkungen von Abschlüsse
(1). Abschlüsse können nur den letzten Wert einer Variablen in der enthaltenden Funktion erhalten
function createFunctions(){ var result = new Array(); for (var i=0; i < 10; i++){ result[i] = function(){ return i; }; } return result; } var res = createFunctions(); console.log(res[0]()); //10 console.log(res[1]()); //10
Prinzip:
Aufgrund der Gültigkeitsbereichskette jeder Funktion Die aktiven Objekte der Die Funktion createFunctions() ist in ihnen gespeichert, sodass sie alle auf dieselbe Variable i verweisen. Wenn die Funktion createFunctions() zurückkehrt, beträgt der Wert der Variablen i 10. Zu diesem Zeitpunkt bezieht sich jede Funktion auf dasselbe Variablenobjekt, das die Variable i speichert, sodass der Wert von i in jeder Funktion 10 beträgt Lösung :获取内部函数的对象result[i]时,使用匿名函数,并在匿名函数中再使用闭包函数,使得当前环境下的num被闭包函数函数调用,存储在作用域中不会被释放.rrree
function createFunctions2(){ var result = new Array(); for(var i = 0 ; i <10 ; i++){ result[i] = (function(num){ return function(){ return num } })(i) } return result; } var res2 = createFunctions2(); console.log(res2[0]()); // 0 console.log(res2[1]()); // 1
diese beiden Variablen durchsucht, sucht sie nur bis zu ihrem aktiven Objekt, sodass die externe Funktion this nicht abgerufen werden kann. Zu diesem Zeitpunkt gibt getNameFunc() eine anonyme Funktion zurück, und die anonyme Funktion ist daher global zeigt auf das globale Fenster
Lösung:
Speichern Sie dieses Objekt im externen Bereich in einer Variablen, auf die der Abschluss zugreifen kann, dann kann der Abschluss auf das Objekt zugreifen
var name = "The Window"; var object = { name: "My Object", getNameFunc: function () { return function () { //匿名函数执行具有全局性 return this.name; //this指向window }; } }; console.log(object.getNameFunc()()) // The Window
(3)
Nachteile des Abschlusses
Spalte
姧姧鲁 Vor 3 Minuten gepostet Schließfunktion
Javascript
die internen Variablen
anderer Funktionen lesen kann.Im Wesentlichen ist der Abschluss also eine Brücke, die das Innere der Funktion mit der Außenseite der Funktion verbindet.
(1) Die grundlegendste Anwendung des Verschlusses:
少废话,上代码 还是<<javascript高级程序设计>>的栗子,
function createComparisonFunction(propertyName) { return function(object1, object2) { var value1 = object1[propertyName]; var value2 = object2[propertyName]; if(value1 < value2) { return -1; } else if(value1 > value2) { return 1; } else { return 0; } }; } var compare = createComparisonFunction("name"); var result = compare({ name: "Nicholas" }, { name: "Greg" });
Analyse:
(1) Die Verschlussfunktion kann auf ihre externe Funktion zugreifen.
Die zurückgegebene anonyme Funktion ist eine Verschlussfunktion, die aktiv ist Das Objekt, das in dieser anonymen Funktion auf die externe Funktion zugreift, ist der Parameter propertyName. Da diese anonyme Funktion die externe Bereichskette einschließt (dies kann auch so verstanden werden: Die Vergleichsfunktion enthält das aktive Objekt und das globale Variablenobjekt der Funktion
createComparisonFunction()), kann die zurückgegebene anonyme Funktion immer auf ihre externen zugreifen propertyName und globale Variablen.
(2) Die durch den Abschluss referenzierten externen Variablen werden aufgrund der Zerstörung des Bereichs, in dem sie sich befinden, nicht zerstört.
Da in der zurückgegebenen Abschlussfunktion auf das aktive Objekt der externen Funktion verwiesen wird, also Das aktive Objekt in createComparisonFunction() (d. h. propertyName) wird nach der Ausführung von createComparisonFunction() nicht zerstört. Denn obwohl createComparisonFunction nach der Ausführung die Bereichskette in seiner Ausführungsumgebung zerstört, wird sein aktives Objekt immer noch von der Abschlussfunktion referenziert und in den Bereich der Ausführungsumgebung der anonymen Funktion platziert
(2) Nebenwirkungen des Abschlusses
(1). Der Abschluss kann nur den letzten Wert jeder Variablen in der darin enthaltenen Funktion erhalten
function createFunctions(){ var result = new Array(); for (var i=0; i < 10; i++){ result[i] = function(){ return i; }; } return result; } var res = createFunctions(); console.log(res[0]()); //10 console.log(res[1]()); //10
Prinzip:
Weil jede Funktion die aktiven Objekte des Die Funktionen createFunctions() werden in der Bereichskette gespeichert, sodass sie alle auf dieselbe Variable i verweisen. Wenn die Funktion createFunctions() zurückkehrt, beträgt der Wert der Variablen i 10. Zu diesem Zeitpunkt bezieht sich jede Funktion auf dasselbe Variablenobjekt, das die Variable i speichert, sodass der Wert von i in jeder Funktion 10 beträgt
Lösung :
获取内部函数的对象result[i]时,使用匿名函数,并在匿名函数中再使用闭包函数,使得当前环境下的num被闭包函数函数调用,存储在作用域中不会被释放.rrree
Prinzip:
definiert eine anonyme Funktion und weist das Ergebnis der sofortigen Ausführung der anonymen Funktion dem Array zu. Die anonyme Funktion hat hier einen Parameter num, der der Wert ist, der von der letzten Funktion zurückgegeben werden soll. Beim Aufruf jeder anonymen Funktion übergeben wir die Variable i. Da Funktionsparameter als Wert übergeben werden, wird der aktuelle Wert der Variablen i in den Parameter Nummer kopiert. Innerhalb dieser anonymen Funktion wird ein Abschluss erstellt und zurückgegeben, der auf num zugreift. Auf diese Weise verfügt jede Funktion im Ergebnisarray über eine eigene Kopie der Num-Variablen und kann daher einen anderen Wert zurückgeben.
(2). Wenn eine anonyme Funktion außerhalb der Abschlussfunktion eingefügt wird, verweist dies auf das globale
function createFunctions2(){ var result = new Array(); for(var i = 0 ; i <10 ; i++){ result[i] = (function(num){ return function(){ return num } })(i) } return result; } var res2 = createFunctions2(); console.log(res2[0]()); // 0 console.log(res2[1]()); // 1
Prinzip:
Jede Funktion erhält beim Aufruf automatisch zwei spezielle Variablen: this und Argumente. Wenn die interne Funktion
diese beiden Variablen durchsucht, sucht sie nur bis zu ihrem aktiven Objekt, sodass die externe Funktion this nicht abgerufen werden kann. Zu diesem Zeitpunkt gibt getNameFunc() eine anonyme Funktion zurück, und die anonyme Funktion ist daher global zeigt auf das globale Fenster
Lösung:
Speichern Sie dieses Objekt im externen Bereich in einer Variablen, auf die der Abschluss zugreifen kann, dann kann der Abschluss auf das Objekt zugreifen
var name = "The Window"; var object = { name: "My Object", getNameFunc: function () { return function () { //匿名函数执行具有全局性 return this.name; //this指向window }; } }; console.log(object.getNameFunc()()) // The Window
(3)
Nachteile des Abschlusses
(1) Da ein Abschluss den Umfang der Funktion trägt, die ihn enthält, belegt er mehr Speicher als andere Funktionen. Die übermäßige Verwendung von Abschlüssen kann zu einer übermäßigen Speichernutzung führen
(2). Abschlüsse können nur den letzten Wert einer Variablen in der enthaltenden Funktion abrufen. Achten Sie daher auf die Schreibweise
Kommentare Nach Zeit sortieren
Laden...
Das obige ist der detaillierte Inhalt vonGrundlegende Verwendung von JavaScript-Abschlussfunktionen und Lösungen für aufgetretene Probleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!