關于javascript原型的修改與重寫(覆蓋)差別詳解

更新時間：2016年08月31日 09:18:10 投稿：jingxian

下面小編就為大家?guī)硪黄P于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中"修改引用"和"修改引用指向的對象"很相似，效果也是一樣的。

以上這篇關于javascript原型的修改與重寫(覆蓋)差別詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: