本文實(shí)例講述了js構(gòu)造函數(shù)constructor和原型prototype原理與用法。分享給大家供大家參考，具體如下：

所有引用類型（函數(shù)，數(shù)組，對(duì)象）都擁有__proto__屬性（隱式原型）

所有函數(shù)擁有prototype屬性（顯式原型）（僅限函數(shù)）

原型對(duì)象：擁有prototype屬性的對(duì)象，在定義函數(shù)時(shí)就被創(chuàng)建

__proto__, prototype和constructor

下面這三個(gè)屬性的定義非常重要，始終貫穿在原型中。

• prototype：此屬性只有構(gòu)造函數(shù)才有，它指向的是當(dāng)前構(gòu)造函數(shù)的原型對(duì)象。
• __proto__：此屬性是任何對(duì)象在創(chuàng)建時(shí)都會(huì)有的一個(gè)屬性，它指向了產(chǎn)生當(dāng)前對(duì)象的構(gòu)造函數(shù)的原型對(duì)象，由于并非標(biāo)準(zhǔn)規(guī)定屬性，不要隨便去更改這個(gè)屬性的值，以免破壞原型鏈，但是可以借助這個(gè)屬性來(lái)學(xué)習(xí)，所謂的原型鏈就是由__proto__連接而成的鏈。
• constructor：此屬性只有原型對(duì)象才有，它默認(rèn)指回prototype屬性所在的構(gòu)造函數(shù)。

構(gòu)造函數(shù)的特點(diǎn)：

　a:構(gòu)造函數(shù)的首字母必須大寫，用來(lái)區(qū)分于普通函數(shù)

　b:內(nèi)部使用的this對(duì)象，來(lái)指向即將要生成的實(shí)例對(duì)象

　c:使用New來(lái)生成實(shí)例對(duì)象

function定義的對(duì)象有一個(gè)prototype屬性，使用new生成的對(duì)象就沒有這個(gè)prototype屬性（Person是一個(gè)對(duì)象）

Person是一個(gè)對(duì)象，它有一個(gè)prototype的原型屬性（因?yàn)樗械膶?duì)象都一prototype原型?。﹑rototype屬性有自己的prototype對(duì)象，而pototype對(duì)象肯定也有自己的construct(構(gòu)造)屬性，construct屬性有自己的constructor(構(gòu)造函數(shù))對(duì)象，神奇的事情要發(fā)生了，這最后一個(gè)constructor對(duì)象就是我們構(gòu)造出來(lái)的function函數(shù)本身！

function Person(name){
 this.name=name;
 this.showMe=function(){
 alert(this.name)
 }
}
var one=new Person('js-yeluosen');
one.showMe();
console.log(one.prototype)//undefined
console.log(typeof Person.prototype)//Obiect
console.log(Person.prototype)
console.log(Person.prototype.constructor)

當(dāng)調(diào)用某種方法或查找某種屬性時(shí)，首先會(huì)在自身調(diào)用和查找，如果自身并沒有該屬性或方法，則會(huì)去它的__proto__屬性中調(diào)用查找，也就是它構(gòu)造函數(shù)的prototype中調(diào)用查找

當(dāng)函數(shù)對(duì)象本身的屬性或方法與原型的屬性或方法同名的時(shí)候：

    1、默認(rèn)調(diào)用的是函數(shù)對(duì)象本身的屬性或方法.
    2、通過(guò)原型增加的屬性或方法的確是存在的.
    3、函數(shù)對(duì)象本身的屬性或方法的優(yōu)先級(jí)要高于原型的屬性或方法.

function Hero(){
 this.name='jiangyx'
}
Hero.prototype.name="yeluosen"
var mm=new Hero()
// 當(dāng)調(diào)用某種方法或查找某種屬性時(shí)，首先會(huì)在自身調(diào)用和查找，如果自身并沒有該屬性或方法，則會(huì)去它的__proto__屬性中調(diào)用查找，也就是它構(gòu)造函數(shù)的prototype中調(diào)用查找
alert(mm.name)//jiangyx
alert(mm.__proto__.name)//jiangyx
delete mm.name
alert(mm.name)//yeluosen

//創(chuàng)建構(gòu)造函數(shù)
function Word(words){
  this.words = words;
}
Word.prototype = {
  alert(){
    alert(this.words);
  }
}
//創(chuàng)建實(shí)例
var w = new Word("hello world");
w.print = function(){
  console.log(this.words);
}
w.print(); //hello world
// 當(dāng)調(diào)用某種方法或查找某種屬性時(shí)，首先會(huì)在自身調(diào)用和查找，如果自身并沒有該屬性或方法，則會(huì)去它的__proto__屬性中調(diào)用查找，也就是它構(gòu)造函數(shù)的prototype中調(diào)用查找
// w本身沒有alert()方法，所以會(huì)去Word()的顯式原型中調(diào)用alert()，即實(shí)例繼承構(gòu)造函數(shù)的方法。     
w.alert(); //hello world
// 實(shí)例w的隱式原型指向它構(gòu)造函數(shù)的顯式原型，指向的意思是恒等于
// w.__proto__ === Word.prototype

print()方法是w實(shí)例本身具有的方法，所以w.print()打印hello world；alert()不屬于w實(shí)例的方法，屬于構(gòu)造函數(shù)的方法，w.alert()也會(huì)打印hello world，因?yàn)閷?shí)例繼承構(gòu)造函數(shù)的方法。

實(shí)例w的隱式原型指向它構(gòu)造函數(shù)的顯式原型，指向的意思是恒等于

w.__proto__ === Word.prototype

總結(jié)

1、prototype只有構(gòu)造函數(shù)才有，指向構(gòu)造函數(shù)的原型。
2、__proto__任何對(duì)象都有，指向產(chǎn)生當(dāng)前對(duì)象的構(gòu)造函數(shù)的原型。
3、constructor只有原型對(duì)象才有，默認(rèn)指回prototype屬性所在的構(gòu)造函數(shù)，使用原型鏈繼承之后，要給新的原型對(duì)象添加constructor屬性并指向構(gòu)造函數(shù)。
4、任何對(duì)象都有產(chǎn)生自己的構(gòu)造函數(shù)，包括構(gòu)造函數(shù)自己。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論