javaScript中的原型解析
來源:易賢網(wǎng) 閱讀:750 次 日期:2016-07-02 14:08:09
溫馨提示:易賢網(wǎng)小編為您整理了“javaScript中的原型解析”,方便廣大網(wǎng)友查閱!

下面小編就為大家?guī)硪黄猨avaScript中的原型解析【推薦】。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。

最近在學(xué)習(xí)javaScript,學(xué)習(xí)到j(luò)s面向?qū)ο笾械脑蜁r,感悟頗多。若有不對的地方,希望可以指正。

js作為一門面向?qū)ο蟮恼Z言,自然也擁有了繼承這一概念,但js中沒有類的概念,也就沒有了類似于java中的extends,所以,我覺得js中的繼承主要依賴于js中的原型(鏈)。

那么,原型是什么呢?我們知道js中函數(shù)亦是一種對象,當(dāng)我們創(chuàng)建一個函數(shù)時,其實(shí)這個函數(shù)也就默認(rèn)的擁有了一個屬性叫做prototype,這個屬型叫做原型屬性,他是一個指針,指向了這個函數(shù)的原型對象,這個原型對象有一個默認(rèn)的屬性叫做constructor,這個屬型指向了擁有protptype屬型的函數(shù)。

function Person(){}

    Person.prototype={

     // constructor:Person;

      first_name:"guo",

      hair_color:"black",

      city:"zhengzhou",

      act:function(){alert("eatting");}

    };

以這個為例,我們先創(chuàng)建了一個函數(shù)Person,這個函數(shù)默認(rèn)的有一個屬性prototype,指向Person.propttype這個對象,這個對象有一個默認(rèn)的屬性constructor(),Person.prototype.constructor--->Person.(其實(shí)此處默認(rèn)的是指向Object,后面會做指正)

當(dāng)我們通過構(gòu)造函數(shù)創(chuàng)建了實(shí)例后會怎么樣呢?

function Person(){} 

  Person.prototype={ 

    first_name:"guo", 

    hair_color:"black", 

    city:"zhengzhou", 

    act:function(){alert("eatting");} 

  }; 

  var boy=new Person(); 

  var girl=new Person(); 

在這時,我們要知道,js中的構(gòu)造函數(shù)與函數(shù)的區(qū)別便是這個new關(guān)鍵字,使用new操作符的函數(shù)便是一個構(gòu)造函數(shù)。當(dāng)我們創(chuàng)建了Person的實(shí)例對象把它保存在boy,girl時,這兩個實(shí)例對象會生成一個默認(rèn)的屬性叫做_proto_(在ECMAScript5中可用[[prototype]]表示),這個屬型指向了構(gòu)造函數(shù)的原型對象,也就是boy._proto_--->Person.prototype(與構(gòu)造函數(shù)毫無關(guān)系)。此時,boy或者girl可以通過點(diǎn)來調(diào)用原型對象中的屬型,此時要知道,boy,girl共享了原型對象的屬型。我們可以通過isProtptypeOf()或者object.getPrototypeOf()(這個函數(shù)的返回值為原型對象,也就是_proto_的值)來驗(yàn)證上述結(jié)論。

alert(Person.prototype.isPrototypeOf(boy)); //true 

alert(Object.getPrototypeOf(boy).first_name);  //"guo" 

此時,我們可以再做進(jìn)一步驗(yàn)證,若在實(shí)例中創(chuàng)建了一個與原型對象屬性重名的屬性會怎么樣呢?

var boy=new Person(); 

var girl=new Person(); 

boy.hair_color="red";  

alert(boy.hair_color);  //red 

alert(girl.hair_color); //black 

alert(Object.getPrototypeOf(boy).hair_color);  //black 

由此可見,實(shí)例中聲明的重名屬性會屏蔽的原型對象中的屬性,但也僅僅時覆蓋,不會對原型對象的屬型造成影響(Object.getPrototypeOf(boy).hair_color==black),也不會對其他共享原型對象屬型的實(shí)例對象產(chǎn)生影響(girl.hair_color==black)。與此同時,可以使用delete操作符刪除實(shí)例對象聲明的屬性來撤銷掉屏蔽效果。我們可以使用hasOwnProperty()來驗(yàn)證一個屬型是存在于實(shí)例的(true),還是存在于原型對象的(false)。

alert(boy.hasOwnProperty("hair_color")); //true

可以使用Object.keys()來枚舉屬性。

var key=Object.keys(Person.prototype); 

alert(key); 

學(xué)習(xí)了這些,我們會發(fā)現(xiàn),使用上面的寫法來聲明原型對象會出現(xiàn)一個問題,constructor不再指向Person了,這與我們說的原型對象的constructor屬性默認(rèn)指向含有prototype屬性的函數(shù)背道而馳,這是因?yàn)椋好縿?chuàng)建一個函數(shù)會自動創(chuàng)建一個prototype對象,這個對象會默認(rèn)創(chuàng)建constructor。所以,此處我們的本質(zhì)是對默認(rèn)的prototype進(jìn)行了重寫,因此新的consrtuctor也變成了指向Object函數(shù),不再指向Person函數(shù)。若constructor真的很重要,那么需要寫上constructor:Person.

之后,我們需要知道原型的動態(tài)性,改變原型對象中的屬性會反應(yīng)到實(shí)例中,不管實(shí)例的創(chuàng)建在原型對象的屬型改變前面或者后面

function Person(){} 

Person.prototype={ 

  first_name:"guo", 

  hair_color:"black", 

  city:"zhengzhou", 

  act:function(){alert("eatting");} 

}; 

var boy=new Person(); 

Person.prototype.hobby="basketball"; 

var girl=new Person(); 

alert(boy.hobby); //basketball 

上面這段代碼可見,即使對原型對象屬性的修改發(fā)生在實(shí)例創(chuàng)建的后面,boy實(shí)例亦然共享了Person.prototype.hobby.

但是,這種情況僅僅發(fā)生在原型對象屬型的修改,當(dāng)對原型對象屬性進(jìn)行完全重寫時,實(shí)例的創(chuàng)建必須放在原型對象屬性重寫的后面,否則會出錯。

function Person(){} 

    var girl=new Person(); 

    Person.prototype={ 

      first_name:"guo", 

      hair_color:"black", 

      city:"zhengzhou", 

      act:function(){alert("eatting");} 

    }; 

    var boy=new Person(); 

    Person.prototype.hobby="basketball"; 

    alert(boy.hobby);  //basketball 

    alert(girl.first_name);  //undefined 

再回到“屏蔽”這一問題上,我們前面了解到了創(chuàng)建實(shí)例對象的屬性(與原型對象中的某一屬性重名)會屏蔽掉原型對象的該屬性,但不影響其他實(shí)例對象。這里有一個錯誤,這個情況只適用于基本數(shù)據(jù)類型,當(dāng)屬性的值引用類型時,會出現(xiàn)一個大問題,看如下代碼。

function Person(){}

    Person.prototype={

      first_name:"guo",

      hair_color:"black",

      friends:["Nick","John"],

      city:"zhengzhou",

      act:function(){alert("eatting");}

    };

    var boy=new Person();

    boy.friends.push("Mike");

    var girl=new Person();

    alert(boy.friends);  //Nick,John,Mike

    alert(girl.friends); //Nick,John,MIke

可見,上面這句話不適用了,原因是friends是存在于原型對象中的,而不是boy中,所以他的修改會影響到這個環(huán)境。(我們可以通過boy.frindes=[]來創(chuàng)建一個boy實(shí)例的屬性)那么,我們就需要引入組合使用構(gòu)造函數(shù)模式與原型模式。

function Person(hair_color,city){ 

      this.hair_color=hair_color; 

      this.city=city; 

      this.friends=["John","Nick"]; 

    } 

    Person.prototype={ 

      constructor:Person, 

      first_name:"guo", 

      act:function() { 

        alert("eatting"); 

      } 

    }; 

    var boy=new Person("black","zhengzhou"); 

    var girl=new Person("red","shenyang"); 

    boy.friends.push("Nick"); 

    alert(girl.friends); 

    alert(boy.friends); 

該模式是目前ECMAScript中使用最廣泛,認(rèn)同最高的創(chuàng)建自定義類型的方法,甚至可以作為一種默認(rèn)模式。

但是對于從事其他面向?qū)ο笳Z言的程序員來說,這樣的模式顯得很怪異,為了將所有的信息都封裝到構(gòu)造函數(shù)中,動態(tài)原型模式出現(xiàn)了。動態(tài)模式主要是通過一個if語句來判斷是否需要對原型對象進(jìn)行初始化,以達(dá)到節(jié)省資源的目的。

此外還有穩(wěn)妥構(gòu)造模式,是為了適應(yīng)沒有共享屬性和不使用this的情況。

以上這篇javaScript中的原型解析【推薦】就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考

更多信息請查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機(jī)網(wǎng)站地址:javaScript中的原型解析
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機(jī)號
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報警專用圖標(biāo)