Detaillierte Erläuterung von Beispielen für Funktionen zur sofortigen Ausführung in JavaScript

Javascript ist im Vergleich zu anderen Programmiersprachen relativ locker, daher ist der JavaScript-Code voller seltsamer Schreibmethoden, die manchmal wie Rauch und Spiegel erscheinen können. Natürlich ist es auch so, dass man alle Arten von Schreibmethoden verstehen kann ein tieferes Verständnis der Eigenschaften der JavaScript-Sprache. Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur Funktion zur sofortigen Ausführung in JavaScript vor. Ich hoffe, er kann Ihnen helfen.

Vorwort

Mit der js-Ausführungsfunktion können Sie Ihre Funktion sofort nach der Erstellung ausführen. Der js-Ausführungsfunktionsmodus ist eine Syntax Ermöglicht die Ausführung Ihrer Funktionen unmittelbar nach ihrer Definition. Bei diesem Modus handelt es sich im Wesentlichen um einen Funktionsausdruck (benannt oder anonym), der unmittelbar nach seiner Erstellung ausgeführt wird.

( function(){…} )() und ( function (){…} () ) sind zwei gängige Methoden zum Schreiben von JavaScript-Funktionen zur sofortigen Ausführung. Zuerst dachte ich, es handele sich um eine anonyme Funktion in Klammern und dann Durch Hinzufügen von Klammern am Ende zum Aufrufen der Funktion wird schließlich der Zweck erreicht, die Funktion sofort nach ihrer Definition auszuführen. Später wurde festgestellt, dass der Grund für das Hinzufügen der Klammern nicht derselbe war.

Im Folgenden gibt es nicht viel zu sagen, werfen wir einen Blick auf die ausführliche Einführung.

Normalerweise deklarieren wir eine Funktion auf folgende Weise:

// 声明函数f1
function f1() {
 console.log("f1");
}
// 通过()来调用此函数
f1();


//一个匿名函数的函数表达式，被赋值给变量f2:
var f2 = function() {
 console.log("f2");
}
//通过()来调用此函数
f2();


//一个命名为f3的函数的函数表达式(这里的函数名可以随意命名，可以不必和变量f3重名)，被赋值给变量f3:
var f3 = function f3() {
 console.log("f3");
}
//通过()来调用此函数
f3();

If Wenn Sie einige benutzerdefinierte Steuerelemente gesehen haben, werden Sie feststellen, dass die meisten davon diesem Schreibstil folgen:

(function() {
 "
 // 这里开始写功能需求
 })();

Das sagen wir oft sofort Ausführungsfunktion ( IIFE bedeutet, wie der Name schon sagt, dass diese Funktion den Funktionskörper sofort ausführt und Sie ihn nicht aktiv aufrufen müssen. Im Allgemeinen verwenden wir IIFE nur für anonyme Funktionen:

Erstens. Es ist nicht erforderlich, die Funktion zu benennen, wodurch eine Verunreinigung globaler Variablen vermieden wird.

Zweitens wird innerhalb von IIFE ein separater Bereich gebildet, der einige private Variablen kapseln kann, die extern nicht gelesen werden können.

Wenn Sie diese beiden Sätze nicht verstehen können, beginnen wir mit dem Funktionsprinzip von IIFE.

Da IIFE normalerweise für anonyme Funktionen verwendet wird, verwenden wir hier eine einfache anonyme Funktion als Beispiel:

var f = function(){
 console.log("f");
}
f();

Wir haben festgestellt, dass hier f nur eine Referenzvariable dieser anonymen Funktion ist. Da f() diese Funktion aufrufen kann, kann ich f durch die Funktion selbst ersetzen:

function(){
 console.log("f"); 
}();

Nach dem Ausführen werden die folgenden Ergebnisse erhalten:

Uncaught SyntaxError: Unexpected token (

Der Grund für diesen Fehler ist, dass, nachdem die Javascript-Engine das Funktionsschlüsselwort erkennt, Es geht davon aus, dass darauf Funktionsdeklarationsanweisungen folgen, die nicht mit Klammern enden sollten. Die Lösung besteht darin, der Engine mitzuteilen, dass der Teil vor den Klammern keine Funktionsdefinitionsanweisung ist, sondern ein Ausdruck, der bearbeitet werden kann. Hier wird zwischen Funktionsdeklaration und Funktionsausdruck unterschieden:

1. Funktionsdeklaration (Das heißt, wir verwenden normalerweise die Funktion x(){}, um eine Funktion zu deklarieren)

function myFunction () { /* logic here */ }

2. Funktionsausdruck (ähnlich zu diesem Formular)

var myFunction = function () { /* logic here */ };
var myObj = {
 myFunction: function () { /* logic here */ }
};

Wir haben in der Grundschule gelernt, dass in () eingeschlossene Ausdrücke zuerst ausgeführt werden, wie folgt:

1+(2+3) //这里先运行小括号里面的内容没有意见撒

Tatsächlich haben Klammern in JavaScript einen ähnlichen Effekt. Wenn die Javascript-Engine das Funktionsschlüsselwort erkennt, geht sie davon aus, dass es sich um eine Funktionsdeklarationsanweisung handelt wenn die Javascript-Engine die Klammern zuerst sieht Was passiert mit den Klammern:

//用小括号把函数包裹起来
(function(){
  console.log("f");  
})();

Die Funktion wird erfolgreich ausgeführt:

f //控制台输出

In diesem Fall geht die Javascript-Engine davon aus, dass es sich um einen Ausdruck und nicht um eine Funktionsdeklaration handelt. Natürlich gibt es viele Möglichkeiten, die Javascript-Engine glauben zu lassen, dass es sich um einen Ausdruck handelt:

!function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){ /* code */ }
new function(){ /* code */ }() // 只有传递参数时，才需要最后那个圆括号。
……

Zurück zur vorherigen Frage: Warum heißt es, dass IIFE die Verschmutzung globaler Variablen vermeidet? Normalerweise gibt es einen ähnlichen Code wie diesen:

(function($){
  "
  //插件实现代码
})(jQuery);

Die JQuery ist hier eigentlich der Parameter der anonymen Funktion. Denken Sie darüber nach, wenn wir die anonyme Funktion aufrufen Funktion, wir verwenden f(), dann ist der anonyme Parameter f(args) Richtig, hier wird jquery als Parameter an die Funktion übergeben, und wenn der formale Parameter $ innerhalb der Funktion verwendet wird, hat dies keine Auswirkungen auf die externe Umgebung. Da einige Plug-Ins auch das Qualifikationsmerkmal $ verwenden, können Sie es gerne verwenden.

Verwandte Empfehlungen:

Funktion zur sofortigen Ausführung in JS

Drei verschiedene Möglichkeiten, JavaScript-Funktionen zur sofortigen Ausführung zu schreiben_Javascript-Tipps

Einführung in Funktionsausdrücke zur sofortigen Ausführung in JavaScript_Javascript-Tipps

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für Funktionen zur sofortigen Ausführung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!