Anonyme Funktionen und Selbstausführung in Javascript

Die Definition von Funktionen kann grob in drei Arten unterteilt werden:

Die erste: Dies ist auch die konventionellste

function double(x){    
    return 2 * x;       
}

Die zweite: Diese Methode verwendet den Funktionskonstruktor Sowohl die Parameterliste als auch der Funktionskörper als Zeichenfolgen, was sehr unpraktisch ist und nicht empfohlen wird.

var double = new Function('x', 'return 2 * x;');

Die dritte Methode:

var double = function(x) { return 2* x; }

Beachten Sie, dass die Funktion auf der rechten Seite von „=" eine anonyme Funktion ist. Nach dem Erstellen der Funktion wird die Funktion zugewiesen Variables Quadrat.

Erstellung anonymer Funktionen

Der erste Weg: Definieren Sie die Quadratfunktion wie oben erwähnt, was auch einer der am häufigsten verwendeten Wege ist.

Zweiter Weg:

(function(x, y){   
    alert(x + y);     
})(2, 3);

Hier wird eine anonyme Funktion erstellt (innerhalb der ersten Klammer), und die zweite Klammer wird verwendet, um die anonyme Funktion aufzurufen und die Parameter zu übergeben. Klammern sind Ausdrücke und Ausdrücke haben Rückgabewerte. Sie können also am Ende ein Klammerpaar hinzufügen, damit sie

Selbstausführende anonyme Funktion< ausführen 🎜 >

1. Was ist eine selbstausführende anonyme Funktion?

Es bezieht sich auf eine Funktion, die so aussieht: (function {// code})();

2 . Frage
Warum kann (function {// code})(); ausgeführt werden, aber function {// code}(); meldet einen Fehler?

3. Analyse
(1) Zunächst müssen wir den Unterschied zwischen den beiden verstehen:
(Funktion {// Code}) ist ein Ausdruck, Funktion {// Code} ist eine Funktionsdeklaration. . Zweitens ist js „vorkompiliert“. Funktionen:
In der „Vorkompilierungsphase“ interpretiert js Funktionsdeklarationen, ignoriert jedoch Ausdrücke (3). }();, da function() {//code} in der Phase „Vorkompilierung“ erklärt wurde, überspringt js function(){//code} und versucht, (); auszuführen, sodass ein Fehler auftritt gemeldet werden;
Wenn js ausgeführt wird, wenn (function {// code})();, da (function {// code}) ein Ausdruck ist, löst js ihn auf, um den Rückgabewert zu erhalten ist eine Funktion, die ausgeführt wird, wenn sie auf ();

stößt. Darüber hinaus ist die Methode zum Konvertieren einer Funktion in einen Ausdruck nicht unbedingt auf den Gruppierungsoperator () angewiesen Operator, ~-Operator, !-Operator...

Zum Beispiel:

Anonyme Funktionen und Schließungen

!function(){   
  alert("另类的匿名函数自执行");   
}();

Das englische Wort für Schließung ist Der Verschluss ist ein sehr wichtiger Teil der JavaScript-Kenntnisse, da die Verwendung von Verschlüssen die Menge unseres Codes erheblich reduzieren, unseren Code klarer aussehen lassen usw. Kurz gesagt, er ist sehr leistungsfähig.

Die Bedeutung des Abschlusses: Um es ganz klar auszudrücken: Der Abschluss ist die Verschachtelung von Funktionen. Die innere Funktion kann alle Variablen der äußeren Funktion verwenden, auch wenn die äußere Funktion ausgeführt wurde (dies beinhaltet die JavaScript-Bereichskette). ).

Dieses Beispiel sieht nach sorgfältiger Analyse des Ausführungsprozesses immer noch sehr einfach aus: Die Ausführung der checkClosure-Funktion erfolgt augenblicklich (vielleicht dauert sie nur 0,00001 Millisekunden). Nach der Ausführung von checkClosure wird str nicht freigegeben. Dies liegt daran, dass die anonyme Funktion in setTimeout einen Verweis auf str hat. Nach 2 Sekunden wird die anonyme Funktion im Funktionskörper ausgeführt und str freigegeben.

function checkClosure(){  
    var str = 'rain-man';  
    setTimeout(  
        function(){ alert(str); } //这是一个匿名函数  
    , 2000);  
}  
checkClosure();

Verwenden Sie Abschlüsse, um Code zu optimieren:

Anonyme Funktionen werden am häufigsten zum Erstellen von Abschlüssen verwendet (dies ist eine der Funktionen der JavaScript-Sprache). Außerdem können Namespaces erstellt werden, um die Verwendung globaler Variablen zu reduzieren.

function forTimeout(x, y){  
    alert(x + y);  
}  
function delay(x , y  , time){  
    setTimeout('forTimeout(' +  x + ',' +  y + ')' , time);      
}  
/**  
 * 上面的delay函数十分难以阅读，也不容易编写，但如果使用闭包就可以让代码更加清晰  
 * function delay(x , y , time){  
 *     setTimeout(  
 *         function(){  
 *             forTimeout(x , y)   
 *         }            
 *     , time);     
 * }  
 */

In diesem Code sind die Funktionen addEvent und removeEvent lokale Variablen, aber wir können sie über die globale Variable oEvent verwenden, was die Verwendung globaler Variablen erheblich reduziert und die Sicherheit der Webseite erhöht. Wir möchten diesen Code verwenden: oEvent.addEvent(document.getElementById('box'), 'click', function(){});

var oEvent = {};  
(function(){   
    var addEvent = function(){ /*代码的实现省略了*/ };  
    function removeEvent(){}  
     
    oEvent.addEvent = addEvent;  
    oEvent.removeEvent = removeEvent;  
})();

Hier erstellen wir eine Variable Rainman und initialisieren sie mit 5 durch direkten Aufruf der anonymen Funktion. Dieser kleine Trick ist manchmal sehr praktisch.

var rainman = (function(x , y){  
    return x + y;  
})(2 , 3);  
/**  
 * 也可以写成下面的形式，因为第一个括号只是帮助我们阅读，但是不推荐使用下面这种书写格式。  
 * var rainman = function(x , y){  
 *    return x + y;  
 * }(2 , 3);

Die Variable eins in diesem Code ist eine lokale Variable (da sie innerhalb einer Funktion definiert ist) und daher von außen nicht zugänglich. Aber hier haben wir die innere Funktion erstellt, die auf die Variable eins zugreifen kann, und die globale Variable äußere bezieht sich auf inner, sodass ein dreimaliger Aufruf von äußere das inkrementelle Ergebnis anzeigt.

var outer = null;  
     
(function(){  
    var one = 1;  
    function inner (){  
        one += 1;  
        alert(one);  
    }  
    outer = inner;  
})();  
     
outer();    //2  
outer();    //3  
outer();    //4

Hinweis

1 Durch den Abschluss kann die innere Funktion auf die Variable in der übergeordneten Funktion verweisen, die Variable jedoch Endwert

Sie werden feststellen, dass, wenn die Maus über jedes

-Element bewegt wird, immer 4 angezeigt wird, nicht der Elementindex, den wir erwarten. Warum ist das so? Es ist bereits in den Anmerkungen erwähnt (Endwert). Offensichtlich ist diese Erklärung zu einfach. Wenn das Mouseover-Ereignis die Listening-Funktion aufruft, sucht es zunächst innerhalb der anonymen Funktion (function(){ Alert(i); }), um zu sehen, ob i definiert ist Daher wird nach oben gesucht. Das Ergebnis ist, dass es definiert wurde und der Wert von i 4 ist (der i-Wert nach der Schleife erscheint daher jedes Mal).

/**  
 * <body>  
 * <ul>  
 *     <li>one</li>  
 *     <li>two</li>  
 *     <li>three</li>  
 *     <li>one</li>  
 * </ul>  
 */
     
var lists = document.getElementsByTagName(&#39;li&#39;);  
for(var i = 0 , len = lists.length ; i < len ; i++){  
    lists[ i ].onmouseover = function(){  
        alert(i);      
    };  
}

Lösung eins:

Lösung zwei:

var lists = document.getElementsByTagName('li');  
for(var i = 0 , len = lists.length ; i < len ; i++){  
    (function(index){  
        lists[ index ].onmouseover = function(){  
            alert(index);      
        };                      
    })(i);  
}

Lösung drei:

var lists = document.getElementsByTagName('li');  
for(var i = 0, len = lists.length; i < len; i++){  
    lists[ i ].$$index = i;    //通过在Dom元素上绑定$$index属性记录下标  
    lists[ i ].onmouseover = function(){  
        alert(this.$$index);      
    };  
}

2 Speicherverlust

function eventListener(list, index){  
    list.onmouseover = function(){  
        alert(index);  
    };  
}  
var lists = document.getElementsByTagName('li');  
for(var i = 0 , len = lists.length ; i < len ; i++){  
    eventListener(lists[ i ] , i);  
}

Die Verwendung von Schließungen kann leicht zu Speicherverlusten im Browser führen. In schwerwiegenden Fällen kann der Browser hängen bleiben.