Nachdem ich die Konzepte und Artikel zu Schließungen im Internet gelesen habe, möchte ich dieses Problem selbst klären.
F: Was ist Schließung?
Antwort: Schließung bedeutet, dass in JavaScript eine interne Funktion immer auf die Parameter und Variablen zugreifen kann, die in der externen Funktion, in der sie sich befindet, deklariert sind, auch nachdem ihre externe Funktion zurückgegeben wurde (Lebensende).
Dies ist das erste Mal, dass ich auf ein Verschlussproblem gestoßen bin
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>闭包循环问题</title>
<style type="text/css">
p {background:#ccc; width: 300px; height: 100px;}
</style>
</head>
<body>
<p id="p0">段落0</p>
<p id="p1">段落1</p>
<p id="p2">段落2</p>
<p id="p3">段落3</p>
<p id="p4">段落4</p>
<script type="text/javascript">
for( var i=0; i<5; i++ ) {
document.getElementById("p"+i).onclick=function() {
alert(i); //访问了父函数的变量i, 闭包
};
};
</script>
</body>
</html>
Nach dem Login kopieren
Wenn Sie es noch nie zuvor verwendet haben, denken Sie vielleicht auch, dass beim Klicken auf einen Absatz die entsprechenden Zahlen 0, 1, 2, 3, 4 für diesen Absatz angezeigt werden. Aber tatsächlich tauchen sie alle auf
Es gab viele Blogs, die dieses Problem online diskutierten, und sie haben viele Methoden angegeben, um die entsprechende Nummer anzuzeigen.
Lösung 1: Speichern Sie die Variable i in einem Attribut des entsprechenden Absatzes
var pAry = document.getElementsByTagName("p");
for( var i=0; i< 5; i++ ) {
pAry[i].no = i;
pAry[i].onclick = function() {
alert(this.no);
}
};
Nach dem Login kopieren
Nach dem Login kopieren
Lösung 2: Fügen Sie eine Abschlussschicht hinzu und übergeben Sie i in Form eines Funktionsparameters an die innere Funktion
var pAry = document.getElementsByTagName("p");
for( var i=0; i< 5; i++ ) {
pAry[i].no = i;
pAry[i].onclick = function() {
alert(this.no);
}
};
Nach dem Login kopieren
Nach dem Login kopieren
In Bezug auf das dadurch verursachte Abschlussproblem lautet das Sprichwort im Internet: „Die Variable i wird in der Funktion als Zeiger oder Variablenadresse gespeichert.“ Nun, alles hängt mit dem Zeiger zusammen. . . . Dann erkunden Sie noch mehr.
Explore 1, der zurückgegebene Wert ist 10 statt
(function test() {
var temp =10;
for(var i=0; i< 5; i++ ){
document.getElementById("p"+i).onclick=function() {
alert(temp); //访问了父函数的变量temp, 闭包
}
};
temp=20;
})();
Nach dem Login kopieren
Erkunden Sie 2, geben Sie einmal 10 zurück und dann 20 zurück
(function test() {
var temp =10;
for( var i=0; i< 5; i++ ) {
document.getElementById("p"+i).onclick=function() {
alert(temp); //访问了父函数的变量i, 闭包
}
if(i===1){
alert(temp);
}
};
temp=20;
})();
Nach dem Login kopieren
Aus der Untersuchung von 1 und 2 kann geschlossen werden, dass die Variable im Speicher resident ist, wenn innerhalb der Funktion auf eine Variable derselben Ebene wie die Funktion zugegriffen wird. Durch den Zugriff auf diese Variable wird im Wesentlichen auf die Adresse der Variablen
zugegriffen
Dann habe ich einen weiteren Artikel über „Dieses Objekt in JS-Schließung“ gelesen. Lassen Sie uns dieses Problem weiter diskutieren.
// js闭包this对象1
var name = 'The Window';
var object = {
name : 'My Object',
getNameFunc1 : function(){
// return this.name;
console.log(this);//object
return function(){//闭包，访问的便是全局变量的了，this指windows
console.log(this);//windows
return this.name; //The Window
}
},
getNameFunc2 : function(){
return this.name;//访问的是object
},
aa:function(){
alert(22);
}
};
alert(object.getNameFunc1()());//弹出“The Window”
Nach dem Login kopieren
Frage: Warum erhält die anonyme Funktion nicht das Objekt, das ihren Gültigkeitsbereich enthält?
Antwort: Jede Funktion erhält beim Aufruf automatisch zwei spezielle Variablen: this und arguments. Bei der Suche nach diesen beiden Variablen leitet die innere Funktion die Suche auf ihr aktives Objekt, sodass es nie möglich ist, in der äußeren Funktion direkt auf diese beiden Variablen zuzugreifen.
Dies kann aber mit folgendem Code erfolgen (direkter Zugriff auf Variablen in externen Funktionen):
// js闭包this对象2
var name = 'The Window';
var object = {
name : 'My Object',
getNameFunc : function(){
var that = this;
console.log(this);//输出的是object
return function(){
console.log(this);//输出的仍然是Windows
return that.name;
};
}
};
alert(object.getNameFunc()());//弹出“My Object”
Nach dem Login kopieren
Der Unterschied besteht darin, dass dieses Objekt einer bestimmten Variablen zugewiesen wird. Auch nach der Rückkehr der Funktion verweist diese immer noch auf das Objekt, sodass das Objekt zurückgegeben wird.
Ich habe so viel über Abschlüsse geschrieben, deshalb möchte ich die Nützlichkeit von Abschlüssen erwähnen; andernfalls wäre es ein schlechter Mensch, sich weiter mit Abschlüssen herumzuschlagen.
Sehen Sie sich dieses typische Verschlussbeispiel an:
function A(){
var a=1;
function B(){
return a;
};
return B;
};
var C=A();//C取得A的子作用域B的访问接口
console.log(C());//1 C能访问到B的父级作用域中的变量a
Nach dem Login kopieren
Solange andere Bereiche die Zugriffsschnittstelle des untergeordneten Bereichs erhalten können, haben andere Bereiche die Möglichkeit, auf die Variablen des übergeordneten Bereichs des untergeordneten Bereichs zuzugreifen. In diesem Fall ist es sehr nützlich, wenn Sie in Zukunft auf den Wert in einer bestimmten Funktion zugreifen müssen.
Viele der oben genannten Codes wurden tatsächlich online gefunden. Ich habe gerade zusammengefasst, was ich verstanden habe und wie ich sie gelesen habe.
