淺談JavaScript原型

標籤：this   type   如何   函數   ati   foo   inf   web   尋找   

　　在JavaScript中，所有函數都會擁有一個叫做prototype的屬性，預設初始值為“空”對象（沒有自身屬性的對象）。

　　1、原型屬性

　　如下所示，簡單地定義一個函數：

　　　　function foo(a, b){

　　　　　　return a * b;

　　　　}

　　這時，就可以像訪問其他對象一樣訪問該函數的屬性，而這些屬性中就包括prototype屬性，它的初始值是一個“空”對象，

可以看成是：foo.prototype = {}。

　　我們可以賦予這個Null 物件一些方法和屬性，這並不會對foo函數本身造成什麼影響，只有當foo()作為構造器（即建構函式）使用時，這些屬性才會起作用。

　　下面來看看如何利用原型添加方法與屬性。

　　2、利用原型添加方法與屬性以及使用原型的方法與屬性

　　首先，構建一個具體的構造器函數Gadget()：

1 function Gadget(name, color){2     this.name = name;3     this.color = color;4     this.whatAreYou = function(){5         return ‘I am a ‘ + this.color + ‘ ‘ + this.name;6     };7 }

　　然後，利用構造器函數的prototype屬性來為其增加兩個屬性（price和rating）和一個方法（getInfo）,

　　方法一：

1 Gadget.prototype.price = 100;2 Gadget.prototype.rating= 3;3 Gadget.prototype.getInfo = function(){4     return ‘Rating: ‘ + this.rating + ‘, price: ‘ + this.price;5 };

　　方法二：

1 Gadget.prototype = {2     price: 100,3     rating: 3,4     getInfo: function(){5         return ‘Rating: ‘ + this.rating + ‘, price: ‘ + this.price;6     }7 }

　　現在，使用該構造器來建立對象並訪問之前定義的那些屬性和方法：

 1 //建立一個對象 2 var newtoy = new Gadget(‘webcam‘, ‘black‘); 3 //訪問之前定義的屬性 4 newtoy.name;    //輸出為 webcam 5  6 newtoy.color;     //輸出為 black 7  8 new.whatAreYou();    //輸出為 I am a black webcam 9 10 newtoy.price;    //輸出為 10011 12 newtoy.rating;    //輸出為 313 14 newtoy.getInfo();    //輸出為 Rating: 3, price: 100

　　對於原型來說，最重要的一點就是它的“即時”性，由於JavaScript幾乎所有對象都是通過傳引用的方式來傳遞的，因此我們所建立的每個新對象實體中並沒有一份屬於自己原型副本，這也就意味著可以隨時修改prototype屬性，並且由同一構造器建立的所有對象的prototype屬性也會同時改變（甚至還會影響在修改之前就已經建立了的那些對象）。

　　如果在此時繼續向上面例子中的原型再添加一些方法，即便newtoy對象在吸食添加的方法定義之前就已經被建立了，但newtoy對象依然可以訪問新增的方法。

　　我們不僅可以在相關的原型對象中添加新的方法和屬性，甚至可以用自訂對象來完全替換掉原有的原型對象。但要注意，原型的聲明是有先後順序的，所以重寫的原型會切斷之前的原型。

 

　　3、自身屬性與原型屬性

　　回到上面的例子，首先來看看原型鏈的執行模式：當對象newtoy訪問某個屬性是，例如name屬性，JavaScript引擎會遍曆該對象的所有屬性，並尋找name屬性，如果找到了就會立即返回，因為構造器函數中，確實定義了這個屬性。而如果newtoy訪問的是price屬性，JavaScript引擎依然會查詢該對象的所有屬性，但是該對象中沒有rating屬性，此時指令碼引擎就會去查詢用於建立當前對象的構造器函數的原型（等價於直接存取 newtoy.constructor.prototype）。如果再原型中找到了該屬性，就立即返回。如果依然沒有找到，則會繼續搜尋其原型的原型，以此類推，知道搜尋到Object.prototype。

　　如果對象的自身屬性與原型屬性同名，那麼返回的將是自身屬性設定的值，因為對象自身屬性的優先順序高於原型屬性。

　　如果要判斷一個屬性時自身屬性還是原型屬性，可以使用 hasOwnProperty()方法來實現。若傳回值為true，則說明是對象的自身屬性；返回false，說明是對象的原型屬性。

 

　　附上一本參考書：《JavaScript物件導向編程指南（第2版）》

淺談JavaScript原型