關(guān)于javascript原型的修改與重寫(xiě)(覆蓋)差別詳解
每個(gè)JavaScript函數(shù)都有prototype屬性(javascript對(duì)象沒(méi)有這個(gè)屬性)，這個(gè)屬性引用了一個(gè)對(duì)象，這個(gè)對(duì)象就是原型對(duì)象。javascript允許我們修改這個(gè)原型對(duì)象。
修改有2種方式：
方式1：在原有的原型對(duì)象上增加屬性或者方法
function Person()
{
}
Person.prototype.add = function(){
alert(this.name);
};
Person.prototype.name = "aty";
var p1 = new Person();
p1.add();//aty
方式2：重寫(xiě)(覆蓋)原型對(duì)象
function Person()
{
}
Person.prototype = {
add : function(){
alert(this.name);
},
name : "aty"
}
var p2 = new Person();
p2.add();//aty
可以看到上面這2種方式都可以修改原型，那他們的差別究竟是什么呢？到底哪種方式才是推薦的的做法呢？
function Person()
{
}
function Animal()
{
}
var person = new Person();
var animal = new Animal();
// 修改原型
Person.prototype.say = function(){
alert("person");
}
// 修改原型
Animal.prototype = {
say : function(){
alert("person");
}
}
person.say();//person
animal.say();//Uncaught TypeError: undefined is not a function
如果是先創(chuàng)建對(duì)象，然后再修改原型，那么如果采用方式1，已經(jīng)創(chuàng)建的對(duì)象能夠正確訪(fǎng)問(wèn)修改后的原型；如果采用方式2，已經(jīng)創(chuàng)建的對(duì)象無(wú)法訪(fǎng)問(wèn)到修改后的原型。從這個(gè)角度來(lái)看，顯然方式1比方式2更好。為什么會(huì)這樣呢？
function Person()
{
}
function Animal()
{
}
var person = new Person();
var animal = new Animal();
alert(person.__proto__ === Person.prototype);//true
alert(animal.__proto__ === Animal.prototype);//true
// 修改原型
Person.prototype.say = function(){
alert("person");
}
// 修改原型
Animal.prototype = {
say : function(){
alert("person");
}
}
alert(person.__proto__ === Person.prototype);//true
alert(animal.__proto__ === Animal.prototype);//false
很顯然這與java中"修改引用"和"修改引用指向的對(duì)象"很相似，效果也是一樣的。
以上這篇關(guān)于javascript原型的修改與重寫(xiě)(覆蓋)差別詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇js最簡(jiǎn)單的雙向綁定實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
JS獲取數(shù)組中出現(xiàn)次數(shù)最多及第二多元素的方法
這篇文章主要介紹了JS獲取數(shù)組中出現(xiàn)次數(shù)最多及第二多元素的方法,涉及javascript針對(duì)數(shù)組的遍歷、排序、判斷、查詢(xún)等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。這篇文章主要為大家詳細(xì)介紹了Web Uploader文件上傳插件使用方法，感興趣的小伙伴們可以參考一下2016-05-05
JavaScript Ajax實(shí)現(xiàn)異步通信
這篇文章主要為大家詳細(xì)介紹了JavaScript Ajax實(shí)現(xiàn)異步通信的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
利用10行js代碼實(shí)現(xiàn)上下滾動(dòng)公告效果
這篇文章主要給大家介紹了關(guān)于利用10行js代碼實(shí)現(xiàn)滾動(dòng)公告效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧。2017-12-12
JS簡(jiǎn)單實(shí)現(xiàn)移動(dòng)端日歷功能示例
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)移動(dòng)端日歷功能的方法,涉及javascript針對(duì)日期與時(shí)間的操作及顯示相關(guān)技巧,需要的朋友可以參考下2016-12-12
Three.js 是一款運(yùn)行在瀏覽器中的 3D 引擎，你可以用它創(chuàng)建各種三維場(chǎng)景，包括了攝影機(jī)、光影、材質(zhì)等各種對(duì)象。下面這篇文章主要給大家介紹了利用three.js如何繪制地球、飛機(jī)與軌跡的效果，文中給出了詳細(xì)的示例代碼，需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2017-02-02
如何用JavaScript實(shí)現(xiàn)功能齊全的單鏈表詳解
這篇文章主要給大家介紹了關(guān)于如何用JavaScript實(shí)現(xiàn)功能齊全的單鏈表的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
JsDoc Toolkit 是一個(gè)把js描述格式化成文檔的工具。開(kāi)發(fā)者只需按JsDoc的規(guī)范寫(xiě)好注釋就可以很方便導(dǎo)出文檔。它是google 推薦的 JsDoc生成工具。2011-02-02
javascript 保存文件到本地實(shí)現(xiàn)方法
本文將提供兩種方式保存圖片，大家可以根據(jù)喜歡自由選擇2012-11-11