首頁 > 開發者 > JavaScript
一、充電
1、一切（參考型別）都是對象，對象是屬性的集合。
2、函數是一種對象，但是函數卻不像數組一樣——你可以說數組是對象的一種，因為數組就像是對象的一個子集一樣。但是函數與對象之間，卻不僅僅是一種包含和被包含的關係，函數和對象之間的關係比較複雜，甚至有一點雞生蛋蛋生雞的邏輯。
function Fn() {this.name = '王福朋';this.year = 1988;}var fn1 = new Fn();var obj = { a: 10, b: 20 };等價於var obj = new Object();obj.a = 10;obj.b = 20;var arr = [5, 'x', true];等價於var arr = new Array();arr[0] = 5;arr[1] = 'x';arr[2] = true;
對象是函數建立的，而函數卻又是一種對象。
3、每個函數都有一個屬性叫做prototype。這個prototype的屬性值是一個對象（屬性的集合，再次強調！），預設的只有一個叫做constructor的屬性，指向這個函數本身。
4、每個對象都有一個__proto__屬性，指向建立該對象的函數的prototype。這個__proto__是一個隱藏的屬性，JavaScript不希望開發人員用到這個屬性值，有的低版本瀏覽器甚至不支援這個屬性值。obj.__proto__=== Object.prototype
二、閉包
1、閉包的基本概念
有權訪問另一個函數範圍中的變數的函數。簡單理解為“定義在一個函數內部的函數”例如：
function createComparisonFunction(propertyName){ return function(object1,object2){//匿名函數 value1=object1[propertyName]; value2=object2[propertyName]; if(value1<value2){ return -1; }else if(value1>value2){ return 1; }else{ return 0; } } } //建立函數 var compareNames=createComparisonFunction("name"); //調用函數 var result=compareNames({name:"Nicolas"},{name:"Greg"}); //解除對匿名函數的引用（以便釋放記憶體） compareNames=null; alert(result);//1
(1).好處：保護函數內的變數安全,加強了封裝性；在記憶體中維持一個變數（緩衝）；匿名自執行函數；類比物件導向編程。
(2).應用情境：使用閉包代替全域變數；函數外或在其他函數中訪問某一函數內部的參數；封裝相關功能；為節點迴圈綁定click事件，在事件函數中使用當次迴圈的值或節點，而不是最後一次迴圈的值或節點；
(3).缺點：常駐記憶體，會增大記憶體使用量量，使用不當很容易造成記憶體泄露，更重要的是，對閉包的使用不當會造成無效記憶體的產生。
只要存在調用內建函式的可能，JavaScript就需要保留被引用的函數。而且JavaScript運行時需要跟蹤引用這個內建函式的所有變數，直到最後一個變數廢棄，JavaScript的垃圾收集器才能釋放相應的記憶體空間。父函數定義的變數在子函數的範圍鏈中，子函數沒有被銷毀，其範圍鏈中所有變數和函數就會被維護，不會被銷毀。
2、閉包的用途
閉包有兩個用途，一是方便實現嵌套的回呼函數，二是隱藏對象的細節。
對於前者，NodeJS的編程風格已經可以說明問題，後者對於函數內部的局部變數外部是不可見的，但可以提供訪問函數來訪問和修改相應的局部變數，從而實現OO封裝的意圖。
(1)、簡單的例子
首先從一個經典錯誤談起，頁面上有若干個div， 我們想給它們綁定一個onclick方法，於是有了下面的代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" src="jquery.js"></script> <script> $(document).ready(function() { var spans = $("#divTest span"); for (var i = 0; i < spans.length; i++) { spans[i].onclick = function() { alert(i); } } }); </script> <style> #divTest{ margin-top:30px; margin-bottom:40px; } span{ border-color:#3C0; border-style:solid; margin-bottom:5px; padding:10px 30px 10px 30px; border-radius:10px } </style> <title>無標題文檔</title> </head> <body> <div id="divTest"> <span>0</span> <span>1</span> <span>2</span> <span>3</span> </div> </body> </html>
很簡單的功能可是卻偏偏出錯了，每次alert出的值都是4，簡單的修改就好使了
$(document).ready(function() { var spans = $("#divTest span"); for (var i = 0; i < spans.length; i++) { (function(num){//匿名函數運算式 spans[i].onclick = function() { alert(num); } })(i);//立即執行，並且把i的值傳給num } });
上面代碼在頁面載入後就會執行，當i的值為4的時候，判斷條件不成立，for迴圈執行完畢，但是因為每個span的onclick方法這時候為內建函式，所以i被閉包引用，記憶體不能被銷毀，i的值會一直保持4，直到程式改變它或者所有的onclick函數銷毀（主動把函數賦為null或者頁面卸載）時才會被回收。這樣每次我們點擊span的時候，onclick函數會尋找i的值（範圍鏈是引用方式），一查等於4，然後就alert給我們了。而第二種方式是使用了一個立即執行的函數又建立了一層閉包，函式宣告放在括弧內就變成了運算式，後面再加上括弧括弧就是調用了，這時候把i當參數傳入，函數立即執行，num儲存每次i的值。
（2）、內建函式
讓我們從一些基礎的知識談起,首先瞭解一下內建函式。內建函式就是定義在另一個函數中的函數。例如：
function outerFn () { function innerFn () {} }
innerFn就是一個被包在outerFn範圍中的內建函式。這意味著，在outerFn內部調用innerFn是有效，而在outerFn外部調用innerFn則是無效的。下面代碼會導致一個JavaScript錯誤：
function outerFn() { document.write("Outer function<br/>"); function innerFn() { document.write("Inner function<br/>"); } } innerFn();
不過在outerFn內部調用innerFn，則可以成功運行：
function outerFn() { document.write("Outer function<br/>"); function innerFn() { document.write("Inner function<br/>"); } innerFn(); } outerFn();
（3）、偉大的逃脫
JavaScript允許開發人員像傳遞任何類型的資料一樣傳遞函數，也就是說，JavaScript中的內建函式能夠逃脫定義他們的外部函數。
逃脫的方式有很多種，例如可以將內建函式指定給一個全域變數：
var globalVar; function outerFn() { document.write("Outer function<br/>"); function innerFn() { document.write("Inner function<br/>"); } globalVar = innerFn; } outerFn(); globalVar();
調用outerFn時會修改全域變數globalVar，這時候它的引用變為innerFn，此後調用globalVar和調用innerFn一樣。這時在outerFn外部直接調用innerFn仍然會導致錯誤，這是因為內建函式雖然通過把引用儲存在全域變數中實現了逃脫，但這個函數的名字依然只存在於outerFn的範圍中。
也可以通過在父函數的傳回值來獲得內建函式引用
function outerFn() { document.write("Outer function<br/>"); function innerFn() { document.write("Inner function<br/>"); } return innerFn; } var fnRef = outerFn(); fnRef();
這裡並沒有在outerFn內部修改全域變數，而是從outerFn中返回了一個對innerFn的引用。通過調用outerFn能夠獲得這個引用，而且這個引用可以可以儲存在變數中。
這種即使離開函數範圍的情況下仍然能夠通過引用調用內建函式的事實，意味著只要存在調用內建函式的可能，JavaScript就需要保留被引用的函數。而且JavaScript運行時需要跟蹤引用這個內建函式的所有變數，直到最後一個變數廢棄，JavaScript的垃圾收集器才能釋放相應的記憶體空間。
說了半天總算和閉包有關係了，閉包是指有許可權訪問另一個函數範圍的變數的函數，建立閉包的常見方式就是在一個函數內部建立另一個函數，就是我們上面說的內建函式，所以剛才說的不是廢話，也是閉包相關的。
（4）、變數的範圍
內建函式也可以有自己的變數，這些變數都被限制在內建函式的範圍中：
function outerFn() { document.write("Outer function<br/>"); function innerFn() { var innerVar = 0; innerVar++; document.write("Inner function\t"); document.write("innerVar = "+innerVar+"<br/>"); } return innerFn; } var fnRef = outerFn(); fnRef(); fnRef(); var fnRef2 = outerFn(); fnRef2(); fnRef2();
每當通過引用或其它方式調用這個內建函式時，就會建立一個新的innerVar變數，然後加1，最後顯示
Outer functionInner function innerVar = 1Inner function innerVar = 1Outer functionInner function innerVar = 1Inner function innerVar = 1
內建函式也可以像其他函數一樣引用全域變數：
var globalVar = 0; function outerFn() { document.write("Outer function<br/>"); function innerFn() { globalVar++; document.write("Inner function\t"); document.write("globalVar = " + globalVar + "<br/>"); } return innerFn; } var fnRef = outerFn(); fnRef(); fnRef(); var fnRef2 = outerFn(); fnRef2(); fnRef2();
現在每次調用內建函式都會持續地遞增這個全域變數的值：
Outer functionInner function globalVar = 1Inner function globalVar = 2Outer functionInner function globalVar = 3Inner function globalVar = 4
但是如果這個變數是父函數的局部變數又會怎樣呢？因為內建函式會引用到父函數的範圍（有興趣可以瞭解一下範圍鏈和使用中的物件的知識），內建函式也可以引用到這些變數
function outerFn() { var outerVar = 0; document.write("Outer function<br/>"); function innerFn() { outerVar++; document.write("Inner function\t"); document.write("outerVar = " + outerVar + "<br/>"); } return innerFn; } var fnRef = outerFn(); fnRef(); fnRef(); var fnRef2 = outerFn(); fnRef2(); fnRef2();
這一次結果非常有意思，也許或出乎我們的意料
Outer functionInner function outerVar = 1Inner function outerVar = 2Outer functionInner function outerVar = 1Inner function outerVar = 2
我們看到的是前面兩種情況合成的效果，通過每個引用調用innerFn都會獨立的遞增outerVar。也就是說第二次調用outerFn沒有繼續沿用outerVar的值，而是在第二次函數調用的範圍建立並綁定了一個一個新的outerVar執行個體，兩個計數器完全無關。
當內建函式在定義它的範圍的外部被引用時，就建立了該內建函式的一個閉包。這種情況下我們稱既不是內建函式局部變數，也不是其參數的變數為自由變數，稱外部函數的調用環境為封閉閉包的環境。從本質上講，如果內建函式引用了位於外部函數中的變數，相當於授權該變數能夠被延遲使用。因此，當外部函數調用完成後，這些變數的記憶體不會被釋放（最後的值會儲存），閉包仍然需要使用它們。
（5）、閉包之間的互動
當存在多個內建函式時，很可能出現意料之外的閉包。我們定義一個遞增函數，這個函數的增量為2
function outerFn() { var outerVar = 0; document.write("Outer function<br/>"); function innerFn1() { outerVar++; document.write("Inner function 1\t"); document.write("outerVar = " + outerVar + "<br/>"); } function innerFn2() { outerVar += 2; document.write("Inner function 2\t"); document.write("outerVar = " + outerVar + "<br/>"); } return { "fn1": innerFn1, "fn2": innerFn2 }; } var fnRef = outerFn(); fnRef.fn1(); fnRef.fn2(); fnRef.fn1(); var fnRef2 = outerFn(); fnRef2.fn1(); fnRef2.fn2(); fnRef2.fn1();
我們映射返回兩個內建函式的引用，可以通過返回的引用調用任一個內建函式，結果：
Outer functionInner function 1 outerVar = 1Inner function 2 outerVar = 3Inner function 1 outerVar = 4Outer functionInner function 1 outerVar = 1Inner function 2 outerVar = 3Inner function 1 outerVar = 4
innerFn1和innerFn2引用了同一個局部變數，因此他們共用一個封閉環境。當innerFn1為outerVar遞增一時，久違innerFn2設定了outerVar的新的起點值，反之亦然。我們也看到對outerFn的後續調用還會建立這些閉包的新執行個體，同時也會建立新的封閉環境，本質上是建立了一個新對象，自由變數就是這個對象的執行個體變數，而閉包就是這個對象的執行個體方法，而且這些變數也是私人的，因為不能在封裝它們的範圍外部直接引用這些變數，從而確保了了物件導向資料的專有性。
3、模仿塊級範圍
JavaScript是函數範圍（function scope），沒有塊級範圍。無論函數體內的變數在什麼地方聲明，對整個函數都是可見的，即JavaScript函數裡聲明的所有變數都被提前到函數體的頂部，只是提前變數聲明，變數的賦值還是保留在原位置。
匿名函數可以用來模仿塊級範圍避免變數提前聲明為全域變數，用作塊級範圍（通常稱為私人範圍）的匿名函數的文法如下：
(function(){//這裡是塊級範圍})();
例如：
function output(count){ (function(){ for(var i=0;i<count;i++){ alert(i); } })(); alert(i); } output(4);
在匿名函數中定義的任何變數，都會在執行結束時被銷毀。因此，變數i只能在迴圈中使用，使用後即被銷毀。
4、私人變數
我們把有權訪問私人變數和私人函數的公有方法稱為特權方法。
（1）、建構函式中定義特權方法
function Person(name){ //name為私人變數 this.getName=function(){//特權方法 return name; }; this.setName=function(value){//特權方法 name=value }; } var person=new Person("zoumiao"); alert(person.getName()); person.setName("zouzou"); alert(person.getName()); var person1=new Person("zou"); alert(person1.getName());//"zou" alert(person.getName());//"zouzou"
在建構函式中定義特權方法也有一個缺點，那就是你必須使用建構函式模式來達到這個目的，建構函式模式的缺點就是針對每一個執行個體都會建立同樣一組新方法，使用靜態私人變數來實現特權方法就可以避免這個問題。
（2）、靜態私人變數
通過在私人範圍中定義私人變數或函數，同樣也可以建立特權方法，其基本模式如下：
(function(){ var name='';//靜態、由所有執行個體共用的屬性 Person=function(value){//全域建構函式 name=value; } Person.prototype.getName=function(){//公有/特權方法 return name; } Person.prototype.setName=function(value){//公有/特權方法 name=value; } })(); var person=new Person("zoumiao"); alert(person.getName()); person.setName("zouzou"); alert(person.getName()); var person1=new Person("zou"); alert(person1.getName());//"zou" alert(person.getName());//"zou"
這個模式與建構函式中定義特權方法的區別，就在於私人變數和函數是由執行個體共用的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
