今天就跟大家聊聊有關(guān)Javascript中prototype與繼承的關(guān)系是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)介紹好的網(wǎng)站是理念、設(shè)計(jì)和技術(shù)的結(jié)合。創(chuàng)新互聯(lián)擁有的網(wǎng)站設(shè)計(jì)理念、多方位的設(shè)計(jì)風(fēng)格、經(jīng)驗(yàn)豐富的設(shè)計(jì)團(tuán)隊(duì)。提供PC端+手機(jī)端網(wǎng)站建設(shè)，用營銷思維進(jìn)行網(wǎng)站設(shè)計(jì)、采用先進(jìn)技術(shù)開源代碼、注重用戶體驗(yàn)與SEO基礎(chǔ)，將技術(shù)與創(chuàng)意整合到網(wǎng)站之中，以契合客戶的方式做到創(chuàng)意性的視覺化效果。

通常來說，javascript中的對象就是一個(gè)指向prototype的指針和一個(gè)自身的屬性列表。javascript創(chuàng)建對象時(shí)采用了寫時(shí)復(fù)制的理念。

只有構(gòu)造器才具有prototype屬性，原型鏈繼承就是創(chuàng)建一個(gè)新的指針，指向構(gòu)造器的prototype屬性。

prototype屬性之所以特別，是因?yàn)閖avascript時(shí)讀取屬性時(shí)的遍歷機(jī)制決定的。本質(zhì)上它就是一個(gè)普通的指針。

構(gòu)造器包括:

1.Object
2.Function
3.Array
4.Date
5.String

下面我們來舉一些例子吧

//每個(gè)function都有一個(gè)默認(rèn)的屬性prototype，而這個(gè)prototype的constructor默認(rèn)指向這個(gè)函數(shù)
//注意Person.constructor 不等于 Person.prototype.constructor. Function實(shí)例自帶constructor屬性
functionPerson(name){
this.name = name;
};
Person.prototype.getName =function(){
returnthis.name;
};
var p =newPerson("ZhangSan");
console.log(Person.prototype.constructor===Person);// true
console.log(p.constructor===Person);// true ,這是因?yàn)閜本身不包含constructor屬性，所以這里其實(shí)調(diào)用的是Person.prototype.constructor

我們的目的是要表示

1.表明Person繼承自Animal

2. 表明p2是Person的實(shí)例

我們修改一下prototype屬性的指向，讓Person能獲取Animal中的prototype屬性中的方法。也就是Person繼承自Animal(人是野獸) 

functionPerson(name){
this.name = name;
};
Person.prototype.getName =function(){
returnthis.name;
};
var p1 =newPerson("ZhangSan");
console.log(p.constructor===Person);// true
console.log(Person.prototype.constructor===Person);// true
functionAnimal(){}
Person.prototype =newAnimal()；//之所以不采用Person.prototype = Animal.prototype,是因?yàn)閚ew 還有其他功能，最后總結(jié)。
var p2 =newPerson("ZhangSan");
//(p2 -> Person.prototype -> Animal.prototype, 所以p2.constructor其實(shí)就是Animal.prototype.constructor)
console.log(p2.constructor===Person);// 輸出為false ,但我們的本意是要這里為true的，表明p2是Person的實(shí)例。此時(shí)目的1達(dá)到了，目的2沒達(dá)到。

但如果我們這么修正

Person.prototype = new Animal()；
Person.prototype.constructor = Person；

這時(shí)p2.consturctor是對了，指向的是Person，表示p2是Person類的實(shí)例，但是新問題出現(xiàn)了。此時(shí)目的2達(dá)到了，目的1沒達(dá)到。

目的1和目的2此時(shí)互相矛盾，是因?yàn)榇藭r(shí)prototype表達(dá)了矛盾的兩個(gè)意思，

1.表示父類是誰

2.作為自己實(shí)例的原型來復(fù)制

因此我們不能直接使用prototype屬性來表示父類是誰，而是用getPrototypeOf()方法來知道父類是誰。 

Person.prototype =newAnimal()；
Person.prototype.constructor=Person；
var p2 =newPerson("ZhangSan");
p2.constructor//顯示 function Person() {}
Object.getPrototypeOf(Person.prototype).constructor//顯示 function Animal() {}

就把這兩個(gè)概念給分開了 ，其實(shí)通過使用 hasOwnProperty()方法,什么時(shí)候訪問的是實(shí)例屬性,什么時(shí)候訪問的是原型屬性就一清二楚了

new做了哪些事情？

當(dāng)代碼var p = new Person()執(zhí)行時(shí)，new 做了如下幾件事情：

創(chuàng)建一個(gè)空白對象

創(chuàng)建一個(gè)指向Person.prototype的指針

將這個(gè)對象通過this關(guān)鍵字傳遞到構(gòu)造函數(shù)中并執(zhí)行構(gòu)造函數(shù)。

具體點(diǎn)來說，在下面這段代碼中，

Person.prototype.getName =function(){}

如果我們通過

var person =newPerson();
其實(shí)類似于
var person =newObject();
person.getName =Person.prototype.getName;

因此通過person.getName()調(diào)用方法時(shí)，this指向的是這個(gè)新創(chuàng)建的對象，而不是prototype對象。

這其實(shí)在給現(xiàn)有函數(shù)加上新功能的情況下會用到，我們可以這么擴(kuò)展現(xiàn)有的方法：

//function myFunc 的寫法基本上等于 var myFunc = new Function();
function myFunc (){
}
myFunc =function(func){
　　//可以在這里做點(diǎn)其他事情
returnfunction(){
　　　　　//可以在這里做點(diǎn)其他事情
return func.apply(this,arguments);
}
}(myFunc)

也可以在Function.prototype方法里直接通過this來訪問上面代碼的myFunc所指向的對象

function myFunc (){
}
if(!Function.prototype.extend){
Function.prototype.extend =function(){
var func =this;
returnfunction(){
func.apply(this,arguments);
}
}
};
var myFunc = myFunc.extend();

總結(jié)一下

如果采用Person.prototype  = Animal.prototype來表示Person繼承自Animal, instanceof方法也同樣會顯示p也是Animal的實(shí)例，返回為true.

之所以不采用此方法,是因?yàn)橄旅鎯蓚€(gè)原因：

1.new 創(chuàng)建了一個(gè)新對象，這樣就避免了設(shè)置Person.prototype.constructor = Person 的時(shí)候也會導(dǎo)致Animal.prototype.constructor的值變?yōu)镻erson,而是動態(tài)給這個(gè)新創(chuàng)建的對象一個(gè)constructor實(shí)例屬性。這樣實(shí)例上的屬性constructor就覆蓋了Animal.prototype.constructor，這樣Person.prototype.constructor和Animal.prototype.contructor就分開了。

2.Animal自身的this對象的屬性沒辦法傳遞給Person

但是像下面這樣直接調(diào)用構(gòu)造函數(shù)又可能失敗，或者產(chǎn)生其他影響。

Person.prototype =newAnimal();

為了避免這種情況，所以我們引入了一個(gè)中間函數(shù)。所以正確的做法應(yīng)該是

Person.prototype =(funtion(){
 　　function F(){};
 　　F.prototype =Animal.prototype
 　　returnnew F();
})()

看完上述內(nèi)容，你們對Javascript中prototype與繼承的關(guān)系是什么有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

分享名稱：Javascript中prototype與繼承的關(guān)系是什么
URL分享：http://aaarwkj.com/article8/gpijop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、關(guān)鍵詞優(yōu)化、動態(tài)網(wǎng)站、ChatGPT、微信小程序、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)