Eine kurze Analyse anonymer Javascript-Funktionen und selbstausführender Funktionen_Javascript-Fähigkeiten

Funktion ist das flexibelste Objekt in JavaScript. Hier erklären wir nur die Verwendung seiner anonymen Funktionen. Anonyme Funktion: Es handelt sich um eine Funktion ohne Funktionsnamen.

Die Definition einer Funktion kann grob in drei Arten unterteilt werden:

Der erste Typ: Dies ist auch der häufigste Typ

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

Zweite Methode: Diese Methode verwendet den Funktionskonstruktor und behandelt sowohl die Parameterliste als auch den Funktionskörper als Zeichenfolgen. Dies ist sehr unpraktisch und wird nicht empfohlen.

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

Dritter Typ:

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 der Variablen quadrat zugewiesen.

Erstellung anonymer Funktionen

Die erste Methode besteht darin, die oben erwähnte Quadratfunktion zu definieren, was auch eine der am häufigsten verwendeten Methoden ist.

Der zweite 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, sodass Sie nach ihnen ein Klammerpaar hinzufügen können, um sie auszuführen

Selbstausführende anonyme Funktion

1. Was ist eine selbstausführende anonyme Funktion?

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

2. Fragen

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.
(2). Zweitens die Eigenschaften von js „Vorkompilierung“:
In der „Vorkompilierungs“-Phase von js werden Funktionsdeklarationen interpretiert, Ausdrücke jedoch ignoriert.
(3). Wenn js function() {//code}(); ausführt, überspringt js function(){//code}, da function() {//code} in der „Vorkompilierungsphase“ interpretiert wurde. versucht, (); auszuführen, daher wird ein Fehler gemeldet; Wenn js (function {// code})(); ausführt, löst js ihn auf, um den Rückgabewert zu erhalten, da (function {// code}) ein Ausdruck ist. Da der Rückgabewert eine Funktion ist, trifft er auf (). ;, es wird ausgeführt.

Außerdem ist die Methode zum Konvertieren einer Funktion in einen Ausdruck nicht unbedingt auf den Gruppierungsoperator () angewiesen. Wir können auch den Void-Operator, den ~-Operator, verwenden...

Zum Beispiel:

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

Anonyme Funktionen und Schließungen

Das englische Wort für „Closure“ ist „Closure“, was ein sehr wichtiger Teil der Kenntnisse in JavaScript ist, da die Verwendung von „Closures“ die Menge unseres Codes erheblich reduzieren, unseren Code klarer aussehen lassen usw. Kurz gesagt, es ist sehr mächtig.

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).

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

Dieses Beispiel sieht nach einer sorgfältigen Analyse des Ausführungsprozesses immer noch sehr einfach aus: Die Ausführung der checkClosure-Funktion erfolgt augenblicklich (vielleicht dauert sie nur 0,00001 Millisekunden) und im Funktionskörper wird eine Variable str erstellt von checkClosure wird str nicht freigegeben, nachdem checkClosure ausgeführt wurde, da 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.

Verwenden Sie Abschlüsse, um den Code zu optimieren:

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

Anonyme Funktionen werden am häufigsten zum Erstellen von Abschlüssen verwendet (eines der Merkmale der JavaScript-Sprache) und können auch Namespaces erstellen, um die Verwendung globaler Variablen zu reduzieren.

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

oEvent.addEvent = addEvent; 
oEvent.removeEvent = removeEvent; 
})();

In diesem Code sind die Funktionen addEvent und removeEvent lokale Variablen, wir können sie jedoch über die globale Variable oEvent verwenden, wodurch die Verwendung globaler Variablen erheblich reduziert und die Sicherheit der Webseite erhöht wird.

Wir möchten diesen Code verwenden:

oEvent.addEvent(document.getElementById('box') , 'click' , function(){});
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 die anonyme Funktion direkt aufrufen. Dieser kleine Trick ist manchmal sehr praktisch.

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.

Achtung

1 Der Abschluss ermöglicht es der inneren Funktion, auf die Variable in der übergeordneten Funktion zu verweisen, aber die Variable ist der Endwert

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

你会发现当鼠标移过每一个25edfb22a4f469ecb59f1190150159c6元素时，总是弹出4，而不是我们期待的元素下标。这是为什么呢？注意事项里已经讲了（最终值）。显然这种解释过于简单，当mouseover事件调用监听函数时，首先在匿名函数（ function(){ alert(i); }）内部查找是否定义了 i，结果是没有定义；因此它会向上查找，查找结果是已经定义了，并且i的值是4（循环后的i值）；所以，最终每次弹出的都是4。

解决方法一：

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

解决方法二：

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

解决方法三：

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

2 内存泄露

使用闭包十分容易造成浏览器的内存泄露，严重情况下会是浏览器挂死