在本文中，我們將了解「閉包」以及它們在 JavaScript 中的實際運作原理。閉包基本上是一個函數的組合，該函數包含對其周圍狀態的引用（也稱為詞法環境）。
在 JavaScript 中，基本上每次在執行時建立函數時都會建立閉包。換句話說，閉包只是一個奇特的名稱，它記住了內部使用的外部事物。
讓我們透過一些範例來了解JavaScript 閉包-
在下面的範例中，我們將宣告一個閉包，最終能夠從外部函數訪問外部變數tagLine
在最內部函數中使用外部變數後，這個特定的閉包將幫助使用者在每次呼叫外部函數時提醒tagLine。
#Filename: index.html
<!DOCTYPE html>
<html>
<head>
<title>
Closures in Javascript
</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<button type="button" onclick="init()">
Click here!!!
</button>
<p id="demo"></p>
<script>
function init() {
var tagLine = "Start your Learning journey now";
function display() { // display() is the inner function, a closure
alert(tagLine); // use variable declared in the parent function
}
display();
}
</script>
</body>
</html>這將產生以下結果。
在下面的範例中，我們使用巢狀閉包呼叫兩個函數並顯示相同函數的輸出。
#檔名：index.html
<!DOCTYPE html>
<html>
<head>
<title>
Closures in Javascript
</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<button type="button" onclick=" Counter()">
Click Me!
</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function Counter() {
var counter = 0;
function outerfunction() {
counter += 1;
document.getElementById("demo1").innerHTML
= "Outer Counter called = " + counter +" from Outer Function " ;
function innerfunction() {
counter += 1;
document.getElementById("demo2").innerHTML
= "Inner Counter called = " + counter +" from Inner Function ";
};
innerfunction();
};
outerfunction();
};
</script>
</body>
</html>
以上是JavaScript 中的閉包是如何運作的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
