關(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實現(xiàn)jquery函數(shù)animate()動畫效果的簡單實例
下面小編就為大家?guī)硪黄鷍s實現(xiàn)jquery函數(shù)animate()動畫效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
JavaScript實現(xiàn)點擊按鈕后變灰避免多次重復(fù)提交
注冊的時候需要發(fā)送驗證激活帳號的郵件，為了避免郵件的多次重復(fù)發(fā)送，所以可以在點擊了發(fā)送后，設(shè)置按鈕變灰，倒計時一段時間后又可重復(fù)點擊，具體實現(xiàn)如下，感興趣的朋友可以參考下哈
2013-07-07
js下將字符串當(dāng)函數(shù)執(zhí)行的方法
js下將字符串當(dāng)函數(shù)執(zhí)行的方法，需要的朋友可以參考下。
2011-07-07
javascript手風(fēng)琴下拉菜單實現(xiàn)代碼
手風(fēng)琴效果的下拉菜單大家都有見到過吧，實現(xiàn)的方法也有很多，這篇文章就為大家分享了javascript手風(fēng)琴下拉菜單實現(xiàn)代碼，純手寫的，感興趣的朋友不要錯過。
2015-11-11
25個好玩的JavaScript小游戲分享
JavaScript 早已不只是一門寫寫網(wǎng)頁特效的腳本語言了，如今廣泛用于網(wǎng)站的前端交互。
2011-04-04
微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值以及獲取值的方法分析
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值以及獲取值的方法,結(jié)合實例形式總結(jié)分析了微信小程序頁面跳轉(zhuǎn)及傳值的常用操作技巧,需要的朋友可以參考下
2017-12-12
JavaScript 不支持 indexof 該如何解決
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。本文給大家介紹ie8 不支持 indexof 的解決方法
2016-03-03
用js實現(xiàn)控件的隱藏及style.visibility的使用
用js控制控件的隱藏，使用style.visibility實現(xiàn) ，具體代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助
2013-06-06
layui--js控制switch的切換方法
今天小編就為大家分享一篇layui--js控制switch的切換方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
微信小程序uniapp添加懸浮菜單的方法
這篇文章主要為大家詳細介紹了微信小程序uniapp添加懸浮菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04