Heim > Artikel > Web-Frontend > Ausführliche Diskussion zur Verwendung von JavaScript-Funktionsabschlüssen und detaillierte Codeerklärungen

Ausführliche Diskussion zur Verwendung von JavaScript-Funktionsabschlüssen und detaillierte Codeerklärungen

伊谢尔伦Original: 2017-07-25 15:04:271278Durchsuche

Das englische Wort für „Abschluss“ ist „Closure“, was ein sehr wichtiger Teil der Kenntnisse in JavaScript ist, da die Verwendung von Abschlüssen die Menge unseres Codes erheblich reduzieren, unseren Code klarer aussehen lassen usw. Kurz gesagt, das ist es sehr funktional leistungsstark.

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). JavaScript wirkt sich auf die Domänenkette aus).

Beispiel 1

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

Dieses Beispiel sieht sehr einfach aus. Wenn Sie den Ausführungsprozess sorgfältig analysieren, gibt es immer noch viele Wissenspunkte: Die Ausführung der Funktion checkClosure erfolgt augenblicklich (vielleicht auch nur). dauert 0,00001 Millisekunden), eine Variable str wird im Funktionskörper von checkClosure erstellt. 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.

Beispiel 2, Code optimieren

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

Die größte Verwendung anonymer Funktionen besteht darin, Abschlüsse zu erstellen (dies ist eine der Funktionen der JavaScript-Sprache), und Sie können auch Namespaces dafür erstellen Reduzieren Sie die globale Verwendung von Variablen.

Beispiel 3:

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

Beispiel 4:

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

Hier erstellen wir eine Variable rainman und initialisieren sie auf 5, indem wir direkt die anonyme Funktion aufrufen, die This Ein kleiner Trick ist manchmal sehr nützlich.

Beispiel 5:

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

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.

Hinweis: Mit der Schließung können innere Funktionen auf Variablen in der übergeordneten Funktion verweisen, aber die Variable ist der Endwert

Beispiel 6:

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

Das finden Sie, wenn Wenn Sie mit der Maus über jedes

Lösung eins:

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

Lösung zwei:

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

Lösung drei:

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

Das obige ist der detaillierte Inhalt vonAusführliche Diskussion zur Verwendung von JavaScript-Funktionsabschlüssen und detaillierte Codeerklärungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Detaillierte Erläuterung der Verwendung der Javascript-Rückruffunktion mit Funktion als ParameterNächster Artikel：Detaillierte Erläuterung der Verwendung der Javascript-Rückruffunktion mit Funktion als Parameter

In Verbindung stehende Artikel

Mehr sehen