[js高手之路]一步步圖解javascript的原型(prototype)對象,原型鏈
我們接著上文繼續,我們通過原型方式,解決了多個實例的方法共享問題,接下來,我們就來搞清楚原型(prototype),原型鏈的來龍去脈.
1 function CreateObj(uName) { 2 this.userName = uName; 3 } 4 CreateObj.prototype.showUserName = function(){ 5 return this.userName; 6 } 7 var obj1 = new CreateObj(‘ghostwu‘);8 var obj2 = new CreateObj(‘衛莊‘);
1,每個函數都有一個原型屬性(prototype) , 這個屬性是一個指針,指向構造函數的原型對象( CreateObj.prototype), 如上圖中的第1根綠色的線
2,在默認情況下,所有原型對象都會自動獲得一個constructor屬性,該屬性的作用上文已經解釋過,該屬性包含一個指向prototype屬性所在的函數,如上圖的第2根綠色的線
3,所有的實例( 通過構造函數new出來的, 原型對象[ 如CreateObj.prototype, 上圖我還沒有畫出來]等 )都包含一個隱式原型(__proto__),該指針指向實例的構造函數的原型對象,
如上圖中的第3根線和第4根線. obj1的構造函數是CreateObj, CreateObj的原型對象是CreateObj.prototype, obj2同理,所以:
obj1.__proto__ === CreateObj.prototype //true
obj2.__proto__ === CreateObj.prototype //true
4,寫在構造函數中, 為this賦值的屬性和方法, 在畫圖的過程中,把他們畫在對象上面,如userName這個是給對象賦值的屬性,所以在obj1和obj2這兩個對象上都會存在一個屬性userName
5,寫在原型對象上的方法或者屬性,應該把他們畫在原型對象上,如
1 function CreateObj(uName) { 2 this.userName = uName; 3 this.showUserName = function(){ 4 return ‘100‘; 5 } 6 } 7 CreateObj.prototype.showUserName = function(){ 8 return this.userName; 9 } 10 11 var obj1 = new CreateObj(‘ghostwu‘); 12 var obj2 = new CreateObj(‘衛莊‘); 13 14 console.log( obj1.showUserName() ); //100 15 console.log( obj2.showUserName() ); //100
如果在構造函數中為this添加一個showUserName方法, 那麽obj1和obj2就會直接調用this上面的,因為這兩個方法會被畫在圖中的實例上,所以:
console.log( obj1.showUserName === obj2.showUserName ); //false 現在,你應該能明白,把屬性和方法寫在構造函數的原型對象(prototype)上之後,能實現多個實例屬性和方法的共享的原理了吧 原型鏈,也就是CreateObj.prototype的後面部分,請聽下回分解![js高手之路]一步步圖解javascript的原型(prototype)對象,原型鏈