Heim > Web-Frontend > js-Tutorial > Was ist ein Abschluss in Javascript? Wie verwende ich den Javascript-Abschluss?

Was ist ein Abschluss in Javascript? Wie verwende ich den Javascript-Abschluss?

伊谢尔伦
Freigeben: 2017-07-20 15:10:32
Original
1715 Leute haben es durchsucht

Der sogenannte „Abschluss“ bezieht sich auf einen Ausdruck (normalerweise eine Funktion), der viele Variablen und eine an diese Variablen gebundene Umgebung hat, sodass diese Variablen auch Teil des Ausdrucks sind.
In Bezug auf Abschlüsse ist die einfachste Beschreibung, dass ECMAScript die Verwendung innerer Funktionen ermöglicht – das heißt, die Funktionsdefinition und der Funktionsausdruck befinden sich im Funktionskörper einer anderen Funktion. Darüber hinaus haben diese inneren Funktionen Zugriff auf alle lokalen Variablen, Parameter und anderen inneren Funktionen, die in der äußeren Funktion deklariert sind, in der sie existieren. Ein Abschluss wird gebildet, wenn eine dieser inneren Funktionen außerhalb der äußeren Funktion aufgerufen wird, die sie enthält. Das heißt, die innere Funktion wird ausgeführt, nachdem die äußere Funktion zurückgekehrt ist. Wenn diese innere Funktion ausgeführt wird, muss sie dennoch auf die lokalen Variablen, Parameter und andere innere Funktionen ihrer äußeren Funktion zugreifen. Die Werte dieser lokalen Variablen, Parameter und Funktionsdeklarationen sind (zunächst) die Werte bei der Rückkehr der äußeren Funktion, werden aber auch von der inneren Funktion beeinflusst.
Kurz gesagt besteht die Funktion des Abschlusses darin, dass der Abschluss nach der Ausführung und Rückgabe der Out-Funktion verhindert, dass der Garbage-Collection-Mechanismus GC von Javascript die von der Out-Funktion belegten Ressourcen zurückfordert, da die innere Funktion die innere Funktion der Out-Funktion ist Die Ausführung hängt von den Variablen in der Out-Funktion ab.
Zwei Merkmale von Abschlüssen:
1. Als Referenz auf eine Funktionsvariable – sie wird aktiviert, wenn die Funktion zurückkehrt.
2. Ein Abschluss ist ein Stapelbereich, der keine Ressourcen freigibt, wenn eine Funktion zurückkehrt.
Beispiel 1:

<script type="text/javascript"> 
function setupSomeGlobals() { 
// Local variable that ends up within closure 
var num = 666; 
// Store some references to functions as global variables 
gAlertNumber = function() { alert(num); } 
gIncreaseNumber = function() { num++; } 
gSetNumber = function(x) { num = x; } 
} 
</script> 
<button onclick="setupSomeGlobals()">生成 - setupSomeGlobals()</button> 
<button onclick="gAlertNumber()">输出值 - gAlertNumber()</button> 
<button onclick="gIncreaseNumber()">增加 - gIncreaseNumber()</button> 
<button onclick="gSetNumber(5)">赋值5 - gSetNumber(5)</button>
Nach dem Login kopieren

Beispiel 2:

<script type="text/javascript"> 
function newClosure(someNum, someRef) { 
// Local variables that end up within closure 
var num = someNum; 
var anArray = [1,2,3]; 
var ref = someRef; 
return function(x) { 
num += x; 
anArray.push(num); 
alert(&#39;num: &#39; + num + 
&#39; nanArray &#39; + anArray.toString() + 
&#39; nref.someVar &#39; + ref.someVar); 
} 
} 
var closure1 = newClosure(40, {someVar:&#39; never-online&#39;}) 
var closure2 = newClosure(99, {someVar:&#39; BlueDestiny&#39;}) 
closure1(4) 
closure2(3) 
</script>
Nach dem Login kopieren

Beispiel 3:

<script language="javascript"> 
/* 声明一个全局变量 - getImgInPositionedDivHtml - 并将一次调用一个外部函数表达式返回的内部函数赋给它。 
这个内部函数会返回一个用于表示绝对定位的 DIV 元素包围着一个 IMG 元素 的 HTML 字符串,这样一来, 
所有可变的属性值都由调用该函数时的参数提供: 
*/ 
var getImgInPositionedDivHtml = (function(){ 
/* 外部函数表达式的局部变量 - buffAr - 保存着缓冲数组。这个数组只会被创建一次,生成的数组实例对内部函数而言永远是可用的 
因此,可供每次调用这个内部函数时使用。 
其中的空字符串用作数据占位符,相应的数据 
将由内部函数插入到这个数组中: 
*/ 
var buffAr = [ 
&#39;<div id="&#39;, 
&#39;&#39;, //index 1, DIV ID 属性 
&#39;" style="position:absolute;top:&#39;, 
&#39;&#39;, //index 3, DIV 顶部位置 
&#39;px;left:&#39;, 
&#39;&#39;, //index 5, DIV 左端位置 
&#39;px;width:&#39;, 
&#39;&#39;, //index 7, DIV 宽度 
&#39;px;height:&#39;, 
&#39;&#39;, //index 9, DIV 高度 
&#39;px;overflow:hidden;\"><img src=\"&#39;, 
&#39;&#39;, //index 11, IMG URL 
&#39;\" width=\"&#39;, 
&#39;&#39;, //index 13, IMG 宽度 
&#39;\" height=\"&#39;, 
&#39;&#39;, //index 15, IMG 调蓄 
&#39;\" alt=\"&#39;, 
&#39;&#39;, //index 17, IMG alt 文本内容 
&#39;\"><\/div>&#39; 
]; 
/* 返回作为对函数表达式求值后结果的内部函数对象。 
这个内部函数就是每次调用执行的函数 
- getImgInPositionedDivHtml( ... ) - 
*/ 
return (function(url, id, width, height, top, left, altText){ 
/* 将不同的参数插入到缓冲数组相应的位置: 
*/ 
buffAr[1] = id; 
buffAr[3] = top; 
buffAr[5] = left; 
buffAr[13] = (buffAr[7] = width); 
buffAr[15] = (buffAr[9] = height); 
buffAr[11] = url; 
buffAr[17] = altText; 
/* 返回通过使用空字符串(相当于将数组元素连接起来) 
连接数组每个元素后形成的字符串: 
*/ 
return buffAr.join(&#39;&#39;); 
}); //:内部函数表达式结束。 
})();//自调用 
alert(getImgInPositionedDivHtml);//显示返回的函数 
alert(getImgInPositionedDivHtml("img.gif","img",100,50,0,0,"Test")); 
</script>
Nach dem Login kopieren

Erklärung: Der Schlüsseltrick besteht darin, eine einzelne Zeile auszuführen Ein (Inline-)Funktionsausdruck erstellt eine zusätzliche Ausführungsumgebung und verwendet die vom Funktionsausdruck zurückgegebene innere Funktion als Funktion zur Verwendung in externem Code. Zu diesem Zeitpunkt ist das Pufferarray als lokale Variable des Funktionsausdrucks definiert. Der Funktionsausdruck muss nur einmal ausgeführt werden, und das Array wird einmal erstellt und kann von Funktionen, die davon abhängen, wiederverwendet werden.

Das obige ist der detaillierte Inhalt vonWas ist ein Abschluss in Javascript? Wie verwende ich den Javascript-Abschluss?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage