Heim > Web-Frontend > js-Tutorial > Fortgeschrittenes Erlernen der JavaScript-Funktionen und detaillierte Erläuterung der Beispielcodes für erweiterte Funktionen

Fortgeschrittenes Erlernen der JavaScript-Funktionen und detaillierte Erläuterung der Beispielcodes für erweiterte Funktionen

伊谢尔伦
Freigeben: 2017-07-25 13:35:05
Original
1678 Leute haben es durchsucht

Anonyme Funktionen und verschachtelte Funktionen

In JavaScript können Sie eine Funktion ohne Namen deklarieren, die als anonyme Funktion (Anonymouse-Funktion) bezeichnet wird. Gleichzeitig ermöglicht JavaScript auch die Deklaration von Funktionen innerhalb von Funktionen, sogenannte verschachtelte Funktionen. Der Geltungsbereich einer verschachtelten Funktion ist die gesamte übergeordnete Funktion.

Im vorherigen Abschnitt zur Funktionsdeklaration haben wir die Verwendung anonymer Funktionen und verschachtelter Funktionen gesehen. Da anonyme Funktionen keine Namen haben, führen sie keine neuen Variablen ein, die den Kontext verschmutzen, und bringen neue Variableneffekte mit sich Daher werden häufig anonyme Funktionen verwendet, um eine globale Umweltverschmutzung zu verhindern.

In der JavaScript-Laufzeit gibt es eine spezielle globale Umgebung (globales Objekt). In der tatsächlichen Entwicklung werden häufig mehrere Bibliotheken von Drittanbietern oder mehrere JS-Dateien verwendet Führen Sie wiederholte Variablen- oder Funktionsdeklarationen in das globale Objekt ein, was zu Verwirrung bei der Codeausführung führt. Beispielsweise werden zwei js-Dateien nacheinander eingeführt und jede definiert ihr eigenes Funktionsprotokoll für den internen Gebrauch. Die zweite eingeführte Funktion überschreibt die erste Definition und löst keine Fehler aus. Der Aufruf der Protokollfunktion bei nachfolgenden Ausführungen kann zu Problemen führen. Fehler verursachen. Derzeit kann dieser Fehler vermieden werden, indem eine anonyme Funktion zum Einschließen der Logik in das gesamte JS verwendet wird. Diese Methode wurde von den meisten Open-Source-JS-Bibliotheken verwendet.

(function() { // 匿名函数 
   
 function log(msg) { 
     console.log(msg); 
 } 
   
 // 其他代码 
   
 }()); // 立即执行
Nach dem Login kopieren

Der obige Code ist ein einfaches Beispiel. Der Umfang der Protokollfunktion ist auf diese anonyme Funktion beschränkt, und die anonyme Funktion wird von einem Klammerpaar () umgeben, um einen Funktionsausdruck zu bilden. Der Wert des Ausdrucks ist eine Funktion, gefolgt von einem Klammerpaar, um anzugeben, dass die Funktion sofort ausgeführt wird, sodass der ursprüngliche Code normal ausgeführt werden kann. Auf diese Weise deklarierte Funktionen, über var deklarierte Variablen usw. sind jedoch intern und können von keinem anderen Code als anonymen Funktionen aufgerufen werden. Wenn Sie einige Funktionen als Schnittstellen verfügbar machen müssen, gibt es mehrere Methoden wie folgt:

 var mylib = (function(global) { 
   
 function log(msg) { 
   console.log(msg); 
 } 
   
 log1 = log;  // 法一:利用没有var的变量声明的默认行为,在log1成为全局变量(不推荐) 
   
 global.log2 = log;  // 法二:直接在全局对象上添加log2属性,赋值为log函数(推荐) 
   
 return {  // 法三:通过匿名函数返回值得到一系列接口函数集合对象,赋值给全局变量mylib(推荐) 
    log: log
 }; 
   
 }(window));
Nach dem Login kopieren

Funktion höherer Ordnung (Funktion hoher Ordnung)

Wenn die Funktion verwendet wird als Parameter oder Rückgabewert. Bei Verwendung spricht man von einer Funktion höherer Ordnung. Funktionen können in JavaScript als Funktionen höherer Ordnung verwendet werden. Im Folgenden werden wir diese beiden Verwendungsmethoden analysieren.

 function negative(n) { 
   return -n; // 取n的相反值 
 } 
   
 function square(n) { 
   return n*n; // n的平方 
 } 
   
 function process(nums, callback) { 
   var result = []; 
   
   for(var i = 0, length = nums.length; i < length; i++) { 
     result[i] = callback(nums[i]); // 对数组nums中的所有元素传递给callback进行处理,将返回值作为结果保存 
   } 
   
   return result; 
 } 
   
 var nums = [-3, -2, -1, 0, 1, 2, 3, 4]; 
 var n_neg = process(nums, negative); 
 // n_neg = [3, 2, 1, 0, -1, -2, -3, -4]; 
 var n_square = process(nums, square); 
 // n_square = [9, 4, 1, 0, 1, 4, 9, 16];
Nach dem Login kopieren

Der obige Code zeigt ein Beispiel für die Übergabe einer Funktion als Parameter an einen anderen Funktionsprozessaufruf. Bei der Implementierung der Prozessfunktion wird der Rückruf als Blackbox behandelt, die für die Übergabe der Parameter verantwortlich ist dazu und dann Erhalten Sie den Rückgabewert. Die spezifische Implementierung des Rückrufs ist vor dem Aufruf nicht klar. Nur wenn die Zeilen 20 und 22 ausgeführt werden, wird der Rückruf durch einen negativen bzw. quadratischen Wert dargestellt und der umgekehrte oder quadratische Wert wird für jedes Element ausgeführt.

 function generator() { 
   var i = 0; 
   return function() { 
     return i++; 
   }; 
 } 
   
 var gen1 = generator(); // 得到一个自然数生成器 
 var gen2 = generator(); // 得到另一个自然数生成器 
 var r1 = gen1(); // r1 = 0 
 var r2 = gen1(); // r2 = 1 
 var r3 = gen2(); // r3 = 0 
 var r4 = gen2(); // r4 = 1
Nach dem Login kopieren

Der obige Code zeigt ein Beispiel für die Verwendung einer Funktion als Rückgabewertgenerator, der eine Funktion zum Generator natürlicher Zahlen ist, und der Rückgabewert ist eine Funktion zum Generator natürlicher Zahlen. Bei jedem Aufruf des Generators wird als Ergebnis eine anonyme Funktion zurückgegeben. Diese anonyme Funktion gibt nacheinander jede natürliche Zahl zurück, wenn sie tatsächlich aufgerufen wird.

Das obige ist der detaillierte Inhalt vonFortgeschrittenes Erlernen der JavaScript-Funktionen und detaillierte Erläuterung der Beispielcodes für erweiterte Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage