JavaScript 閉包
什麼是閉包
閉包，官方對閉包的解釋是：一個擁有許多變數和綁定了這些變數的環境的表達式（通常是一個函數），因而這些變數也是該表達式的一部分。閉包的特點：
1. 作為一個函數變數的一個引用，當函數返回時，其處於激活狀態。
2. 一個閉包就是當一個函數回傳時，一個沒有釋放資源的堆疊區。
簡單的說，Javascript允許使用內部函數---即函數定義和函數表達式位於另一個函數的函數體內。而且，這些內部函數可以存取它們所在的外部函數中聲明的所有局部變數、參數和聲明的其他內部函數。當其中一個這樣的內部函數在包含它們的外部函數之外被呼叫時，就會形成閉包。
閉包的幾個寫法和用法
第一種寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
function Circle(r) {
this.r = r;
}
Circle.PI = 3.14159;
Circle.prototype.area = function() {
return Circle.PI * this.r * this.r;
}
var c = new Circle(1.0);
alert(c.area());
</script>
</head>
<body>
</body>
</html>這種寫法沒什麼特別的，只是給函數添加一些屬性。
第二種寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
var Circle = function() {
var obj = new Object();
obj.PI = 3.14159;
obj.area = function( r ) {
return this.PI * r * r;
}
return obj;
}
var c = new Circle();
alert( c.area( 1.0 ) );
</script>
</head>
<body>
</body>
</html>這種寫法是宣告一個變量，將一個函數當作值賦給變數。
第三種寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
var Circle = new Object();
Circle.PI = 3.14159;
Circle.Area = function( r ) {
return this.PI * r * r;
}
alert( Circle.Area( 1.0 ) );
</script>
</head>
<body>
</body>
</html>這種方法最好理解，就是new 一個對象，然後給對象添加屬性和方法。
第四種寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
var Circle={
"PI":3.14159,
"area":function(r){
return this.PI * r * r;
}
};
alert( Circle.area(1.0) );
</script>
</head>
<body>
</body>
</html>這種方法使用較多，也最為方便。 var obj = {}就是宣告一個空的物件
#Javascript閉包的用途
事實上，透過使用閉包，我們可以做很多事情。例如模擬物件導向的程式碼風格；更優雅，更簡潔的表達出程式碼；在某些方面提升程式碼的執行效率。
1、匿名自執行函數
2、結果快取
3、封裝
4、實作類別與繼承
#JavaScript 內嵌函數
所有函數都能存取全域變數。
實際上，在 JavaScript 中，所有函數都能存取它們上一層的作用域。
JavaScript 支援巢狀函數。巢狀函數可以存取上一層的函數變數。
該實例中，內嵌函數 plus() 可以存取父函數的 counter 變數：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
</script>
</body>
</html>如果我們能在外部存取 plus () 函數，這樣就能解決計數器的困境。
我們同樣需要確保 counter = 0 只執行一次。
這裡就需要閉包。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>實例解析
變數 add 指定了函數自我呼叫的回傳字值。
自我呼叫函數只執行一次。設定計數器為 0。並返回函數表達式。
add變數可以當作一個函數使用。非常棒的部分是它可以存取函數上一層作用域的計數器。
這個叫作 JavaScript 閉包。它使得函數擁有私有變數變成可能。
計數器受匿名函數的作用域保護，只能透過 add 方法修改。
閉包是可存取上一層函數作用域裡變數的函數，即便上一層函數已經關閉。
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 