HTML 學習筆記 JavaScript (prototype)

標籤：share   瀏覽器   int   筆記   改變   構造器   建構函式   分享   通過   

原博地址:http://www.cnblogs.com/dolphinX/p/3286177.html

原部落格的作者是一個非常牛逼的前端大神，我作為一個初學者，在此藉助大神的部落格進行自己的學習。在這裡感謝原作者無私的分享。也強烈建議大家到原作者的部落格下學習。好了，現在讓我們跟著大神的腳步前進吧。

用過JavaScript的人肯定都對prototype如雷貫耳，但是這究竟是個什麼東西卻讓初學者莫衷一是，只知道函數都有一個prototype屬性，可以為其添加函數供執行個體訪問，其他的就不清楚了，下面我們就跟著大神的腳步，來揭開其神秘的面紗吧。

每個函數都有一個prototype屬性，這個屬性指向一個對象的引用。這個對象稱為原型對象，原型對象包含執行個體共用的方法和屬性，也就是說將函數用作建構函式調用(使用new操作符調用)的時候，新建立的對象會從原型對象上繼承屬性和方法。

私人變數 函數

在具體說prototype前說幾個相關的東西，可以更好的裡脊prototype的設計意圖。首先說一下函數的範圍，在函數內定義的變數和函數如果不對外提供介面，那麼外部將無法訪問到，也就是變為私人變數和私人函數。

function Obj(){     var a=0; //私人變數     var fn=function(){ //私人函數                        }}  

這樣在函數對象obj外部無法訪問的變數a和函數fn，它們就是私人的，只能在Obj內部訪問，即使是函數Obj的執行個體也無法訪問這些變數和函數。

var o=new Obj();console.log(o.a); //undefinedconsole.log(o.fn); //undefined

靜態變數 函數

當定義一個函數後，通過“.”為其添加函數和屬性，通過對象本身仍然可以訪問得到，但是其執行個體卻訪問不到，這樣的函數和變數分別被稱為靜態函數和靜態變數。

function Obj() {    }Obj.a = 0;//靜態變數Obj.fn = function() {//靜態函數        }alert(Obj.a);//0console.log(Obj.fn);//functionvar o = new Obj();console.log(o.a);//undefinedconsole.log(o.fn);//undefined

執行個體變數 函數

在物件導向編程中除了一些庫函數我們還是希望在對象定義的時候同時定義一些屬性和方法，執行個體化後可以訪問，JavaScript也能做到這樣。

function Obj() {    this.a = [];//執行個體變數    this.fn = function() {        //執行個體方法    }}console.log(typeof Obj.a);//undefinedconsole.log(typeof Obj.fn);//undefined

var o = new  Obj();console.log(typeof o.a); //objectconsole.log(typeof o.fn);//function

這樣可以達到上述目的，然而

function Obj() {    this.a = [];//執行個體變數    this.fn = function() {        //執行個體方法    }}var o = new Obj();o.a.push(1);o.fn = {};console.log(o.a); //Array [ 1 ]console.log(typeof o.fn);//objectvar o2 = new Obj();console.log(o2.a);//Array [  ]console.log(typeof o2.fn);//function

上面的代碼完全符合預期，但同時也說明一個問題，在o中修改了a和fn，而o2中沒有改變，由於數組和函數都是對象，是參考型別，這就說明o1中的屬性和方法與o2中的屬性與方法雖然同名但卻不是一個引用。而是對Obj對象定義的屬性和方法的一個複製。

這個對屬性來說沒有什麼問題，但是對於方法來說問題就很大了，因為方法都是在做完全一樣的功能，但是卻又有兩份複製，如果一個函數對象有上千的執行個體方法，那麼他的執行個體都要保持一份上千方法的複製，這顯然是不科學的，那麼該怎麼辦呢？prototype應運而生。

prototype

無論什麼時候 只要建立了一個新函數，就會根據一組特定的規則為該函數建立一個prototype屬性，預設情況下prototype屬性會預設獲得一個constructor(建構函式)屬性，這個屬性是一個指向prototype屬性所在函數的指標。

function Person(){                }

根據可以看出Person對象會自動獲得prototype屬性，而prototype也是一個對象，會自動獲得一個constructor屬性，該屬性正是指向Person對象。

當調用構造器函數建立一個執行個體的時候，執行個體內部包含一個內部指標(很多瀏覽器這個指標名字為_proto_),指向建構函式的prototype屬性，這個連結存在於執行個體和建構函式的prototype之間，而不是執行個體和建構函式之間。

function Person(name) {    this.name = name;}Person.prototype.printName = function() {    alert(this.name);}var person1 = new Person("tian");var person2 = new Person("lian");

Person的執行個體person1中包含了name屬性，同時自動產生一個_proto_屬性，該屬性只想Person的prototype。可以訪問prototype內部的PrintName方法，大概是這個樣子的

寫段程式測試一下看看prototype內屬性、方法是能夠共用

function Person(name) {    this.name = name;}Person.prototype.share = [];Person.prototype.printName = function() {    alert(this.name);}var person1 = new Person("tian");var person2 = new Person("lian");person1.share.push(1);person2.share.push(2);console.log(person2.share);//Array [ 1, 2 ]

果不其然！實際上當代碼讀取某個對象的某個屬性的時候，都會執行一遍搜尋，目標是具有給定名字的屬性，搜尋首先從對象執行個體開始，如果在執行個體中找到該屬性則返回，如果沒有則尋找prototype，如果還是沒有找到則繼續遞迴prototype的prototype對象，直到找到為止，如果遞迴到object仍然沒有則返回錯誤。同樣道理如果在執行個體中定義如prototype同名的屬性或函數，則會覆蓋prototype的屬性或函數。

function Person(name){      this.name=name;}            Person.prototype.share=[];var person=new Person(‘Byron‘);person.share=0;            console.log(person.share); //0而不是prototype中的[]

構造簡單的對象

當然prototype不是為專門為解決上面的問題而定義的，但是卻解決了上面的問題。瞭解了這些知識就可以構建一個科學的，複用率高的對象，如果希望執行個體對象的屬性或函數能複用就定義到prototype中，如果希望每個執行個體單獨擁有屬性或方法，則定義到this中，可以通過建構函式傳遞執行個體化參數。

function Person(name) {    this.name = name;}Person.prototype.share = [];Person.prototype.printName = function() {    alert(this.name);}

prototype 屬性中的資料 類似於 iOS中static 修飾的全域變數 只初始化一次，本檔案共用，一變具變。再次感謝原部落格的大神。嘿嘿。

 

HTML 學習筆記 JavaScript (prototype)