Detaillierte Erklärung der Javascript-Closure_Javascript-Fähigkeiten-js-Tutorial-php.cn

Detaillierte Erklärung der Javascript-Closure_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:51:54

Original

1256 Leute haben es durchsucht

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

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

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.