關(guān)于javascript原型的修改與重寫(覆蓋)差別詳解
更新時間：2016年08月31日 09:18:10 投稿：jingxian
下面小編就為大家?guī)硪黄P(guān)于javascript原型的修改與重寫(覆蓋)差別詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
每個JavaScript函數(shù)都有prototype屬性(javascript對象沒有這個屬性)，這個屬性引用了一個對象，這個對象就是原型對象。javascript允許我們修改這個原型對象。
修改有2種方式：
方式1：在原有的原型對象上增加屬性或者方法
function Person()
{
}
Person.prototype.add = function(){
alert(this.name);
};
Person.prototype.name = "aty";
var p1 = new Person();
p1.add();//aty
方式2：重寫(覆蓋)原型對象
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)建對象，然后再修改原型，那么如果采用方式1，已經(jīng)創(chuàng)建的對象能夠正確訪問修改后的原型；如果采用方式2，已經(jīng)創(chuàng)建的對象無法訪問到修改后的原型。從這個角度來看，顯然方式1比方式2更好。為什么會這樣呢？
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中"修改引用"和"修改引用指向的對象"很相似，效果也是一樣的。
以上這篇關(guān)于javascript原型的修改與重寫(覆蓋)差別詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
原生js實(shí)現(xiàn)jquery函數(shù)animate()動畫效果的簡單實(shí)例
下面小編就為大家?guī)硪黄鷍s實(shí)現(xiàn)jquery函數(shù)animate()動畫效果的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕后變灰避免多次重復(fù)提交
注冊的時候需要發(fā)送驗(yàn)證激活帳號的郵件，為了避免郵件的多次重復(fù)發(fā)送，所以可以在點(diǎn)擊了發(fā)送后，設(shè)置按鈕變灰，倒計時一段時間后又可重復(fù)點(diǎn)擊，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-07-07
js下將字符串當(dāng)函數(shù)執(zhí)行的方法
js下將字符串當(dāng)函數(shù)執(zhí)行的方法，需要的朋友可以參考下。2011-07-07
javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼
手風(fēng)琴效果的下拉菜單大家都有見到過吧，實(shí)現(xiàn)的方法也有很多，這篇文章就為大家分享了javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼，純手寫的，感興趣的朋友不要錯過。2015-11-11
JavaScript 早已不只是一門寫寫網(wǎng)頁特效的腳本語言了，如今廣泛用于網(wǎng)站的前端交互。2011-04-04
微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值以及獲取值的方法分析
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值以及獲取值的方法,結(jié)合實(shí)例形式總結(jié)分析了微信小程序頁面跳轉(zhuǎn)及傳值的常用操作技巧,需要的朋友可以參考下2017-12-12
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。本文給大家介紹ie8 不支持 indexof 的解決方法2016-03-03
用js實(shí)現(xiàn)控件的隱藏及style.visibility的使用
用js控制控件的隱藏，使用style.visibility實(shí)現(xiàn) ，具體代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
今天小編就為大家分享一篇layui--js控制switch的切換方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序uniapp添加懸浮菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04