快捷導(dǎo)航

javascript prototype原型詳解(比較基礎(chǔ))

更新時(shí)間：2016年12月26日 20:35:24 作者：antzone

prototype原型是javascript中特別重要的概念，屬于必須要掌握，如果沒有良好的掌握的話，進(jìn)一步用好或者學(xué)好js基本是不可能的實(shí)現(xiàn)的事情，并且此概念稍有難度，可能對于初次接觸的朋友來說有點(diǎn)困難，下面就通過代碼實(shí)例簡單介紹一下prototype原型的用法

javascript的prototype原型簡單介紹:
prototype原型是javascript中特別重要的概念，屬于必須要掌握，如果沒有良好的掌握的話，進(jìn)一步用好或者學(xué)好js基本是不可能的實(shí)現(xiàn)的事情，并且此概念稍有難度，可能對于初次接觸的朋友來說有點(diǎn)困難，下面就通過代碼實(shí)例簡單介紹一下prototype原型的用法。

一.基本概念:

每一個(gè)函數(shù)都具有一個(gè)prototype屬性。
此屬性是一個(gè)指針，能夠指向一個(gè)對象，而此對象將會(huì)被由構(gòu)造函數(shù)創(chuàng)建的對象實(shí)例所共享，也就是會(huì)繼承此對象。
總結(jié):prototype所指向的對象是被構(gòu)造函數(shù)所創(chuàng)建的對象實(shí)例所共同共享的。
創(chuàng)建的對象實(shí)例有一個(gè)內(nèi)部屬性[[Prototype]]，它是一個(gè)指針，指向構(gòu)造函數(shù)原型（prototype）指向的對象。
先看一段代碼:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
antzone.prototype.getName=function(){
 return this.webname;
}
var oantzone=new antzone("腳本之家",10);
console.log(oantzone.getName());
</script>

效果圖：

圖示如下:

上面圖片基本說明了prototype的作用。
二.代碼實(shí)例:
實(shí)例一:

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江蘇省徐州"
}
var oantzone=new antzone("腳本之家",10);
antzone.prototype=obj;
console.log(oantzone.address);

看以上代碼，很多朋友可能以為輸出值是"江蘇省徐州"，但是實(shí)際輸出內(nèi)容是undefined，這是因?yàn)樵谑褂脴?gòu)造函數(shù)創(chuàng)建對象oantzone的時(shí)候，oantzone對象內(nèi)部屬性[[Prototype]]將會(huì)指向antzone()構(gòu)造函數(shù)的原型prototype所指向的對象，而后來antzone.prototype=obj是重置構(gòu)造函數(shù)的原型，而oantzone的內(nèi)置屬性[[Prototype]]指向依然是原來的對象，自然oantzone.address是undefined。
實(shí)例二:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江蘇省徐州"
}
antzone.prototype=obj;
var oantzone=new antzone("腳本之家",10);
console.log(oantzone.webname+oantzone.address);
</script>

此代碼和上一段代碼的唯一不同，就是第八行和第九行進(jìn)行了一下交換，這樣就可以輸出"江蘇省徐州"，這個(gè)就不難理解了，因?yàn)閷ο髮?shí)例是在重置原型以后創(chuàng)建的。
實(shí)例三:

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江蘇省徐州"
}
antzone.prototype.add=obj;
var oantzone=new antzone("腳本之家",10);
console.log(oantzone.add.address);

以上代碼只是修改對象原型，而不是重置對象原型。

您可能感興趣的文章: