js構(gòu)造函數(shù)constructor和原型prototype原理與用法實(shí)例分析
本文實(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ù)的首字母必須大寫(xiě),用來(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ì)象就沒(méi)有這個(gè)prototype屬性(Person是一個(gè)對(duì)象)
Person是一個(gè)對(duì)象,它有一個(gè)prototype的原型屬性(因?yàn)樗械膶?duì)象都一prototype原型!)prototype屬性有自己的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)//undefinedconsole.log(typeof Person.prototype)//Obiectconsole.log(Person.prototype)console.log(Person.prototype.constructor)

當(dāng)調(diào)用某種方法或查找某種屬性時(shí),首先會(huì)在自身調(diào)用和查找,如果自身并沒(méi)有該屬性或方法,則會(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)用和查找,如果自身并沒(méi)有該屬性或方法,則會(huì)去它的__proto__屬性中調(diào)用查找,也就是它構(gòu)造函數(shù)的prototype中調(diào)用查找alert(mm.name)//jiangyxalert(mm.__proto__.name)//jiangyxdelete mm.namealert(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)用和查找,如果自身并沒(méi)有該屬性或方法,則會(huì)去它的__proto__屬性中調(diào)用查找,也就是它構(gòu)造函數(shù)的prototype中調(diào)用查找// w本身沒(méi)有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ì)有所幫助。
相關(guān)文章:
1. JavaScript實(shí)現(xiàn)留言板實(shí)戰(zhàn)案例2. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法3. 資深程序員:給Python軟件開(kāi)發(fā)測(cè)試的25個(gè)忠告!4. 實(shí)現(xiàn)java簡(jiǎn)單的線程池5. 如何從Python的cmd中獲得.py文件參數(shù)6. Python基于requests庫(kù)爬取網(wǎng)站信息7. 使用Blazor框架實(shí)現(xiàn)在前端瀏覽器中導(dǎo)入和導(dǎo)出Excel8. Python-openpyxl表格讀取寫(xiě)入的案例詳解9. ASP基礎(chǔ)知識(shí)Command對(duì)象講解10. 如何在python中執(zhí)行另一個(gè)py文件

網(wǎng)公網(wǎng)安備