簡(jiǎn)單理解js的prototype屬性及使用
在進(jìn)入正文之前,我得先說(shuō)說(shuō)我認(rèn)識(shí)js的prototype這個(gè)東西的曲折過(guò)程。
百度js的prototype的文章,先看看,W3School關(guān)于prototype的介紹:

你覺(jué)得這概念適合定義js的prototype這個(gè)東西嗎?你是否也認(rèn)為prototype是一個(gè)object對(duì)象的屬性呢?是的話,請(qǐng)認(rèn)真認(rèn)真看我這篇文章,因?yàn)檫@篇文章會(huì)毀滅你的人生三觀,呵呵,就是有這么嚴(yán)重,因?yàn)楸救司褪潜贿@個(gè)定義給害慘的。
不得不說(shuō),看了網(wǎng)上的一些介紹prototype的文章,基本上都說(shuō)prototype是對(duì)象的一個(gè)屬性,于是,我也堅(jiān)定的認(rèn)為prototype是一個(gè)對(duì)象的屬性,所以,我被了坑好久好久,由此,引發(fā)的后果就是,我一次次的誤解別人寫的含有prototype的js代碼,也就是當(dāng)別人亮出js的prototype這個(gè)屬性來(lái)寫js代碼時(shí),我看著他們寫的代碼都是 ····一頭霧水····· ,悲催??!所以,我恨死prototype這個(gè)東西了,因此,在這里,我今天必須把js的prototype屬性道個(gè)明明白白??垂?,請(qǐng)擦亮你的眼睛,仔細(xì)看我下面的實(shí)驗(yàn)。
當(dāng)然,我希望諸位看官也能夠靜下心來(lái),把我下面的實(shí)驗(yàn)重新做一遍,好證明我的結(jié)論是正確的。
同時(shí),也為了證明·····我沒(méi)有····騙你們·····,呵呵,廢話不多說(shuō)了,下面進(jìn)入實(shí)驗(yàn)階段。
先介紹一個(gè)下面要用到的函數(shù),JSON.stringify(value)。
這個(gè)函數(shù)的作用是:把傳入的參數(shù)value變成字符串,它有三個(gè)參數(shù),第一個(gè)參數(shù)是必須的,其余的兩個(gè)參數(shù)可填可不填。
關(guān)于JSON.stringify函數(shù)的作用請(qǐng)看這篇文章。http://www.dhdzp.com/article/29893.htm,這里說(shuō)的很清楚。
首先,測(cè)試W3Schol的定義到底行不行的通:
如果,真如W3Schol所說(shuō)的那樣,prototype是object的一個(gè)屬性,那么,我們來(lái)創(chuàng)建一個(gè)對(duì)象,看看這個(gè)對(duì)象的prototype到底是啥。
var ob = { };//超級(jí)簡(jiǎn)單的空對(duì)象
alert(JSON.stringify(ob.prototype));
你覺(jué)得上面的代碼會(huì)alert出什么呢?既然prototype是object的一個(gè)屬性,那么上面肯定能夠獲取到什么東西對(duì)吧?但是,如果你拿這段代碼去做實(shí)驗(yàn)了,你會(huì)被打臉的,因?yàn)樗黙lert的東西是·········undefined··········,也就是說(shuō)object這個(gè)屬性prototype不是個(gè)東西,很殘酷吧,但現(xiàn)實(shí)就是這樣,任何對(duì)象引用prototype都會(huì)出現(xiàn)undefined,不信,你可以試一試。
我可以很明白的告訴你,prototype絕對(duì)不是給對(duì)象用的,對(duì)象根本沒(méi)辦法引用prototype這個(gè)屬性,它真正的屬主,其實(shí)是···········函數(shù)········,記住,能夠引用prototype的東西絕對(duì)是函數(shù),絕對(duì)是函數(shù),絕對(duì)是函數(shù),prototype是屬于函數(shù)的一個(gè)屬性,prototype是屬于函數(shù)的一個(gè)屬性,prototype是屬于函數(shù)的一個(gè)屬性,能夠引用它的只有·····函數(shù)····,能夠引用它的只有·····函數(shù)·····,能夠引用它的只有····函數(shù)····,函數(shù),函數(shù),函數(shù),重要的事情一定要說(shuō)千百遍,呵呵,因?yàn)橹挥忻鞔_這一點(diǎn),下面,你才明白我要講的東西。別怪我這么墨跡啊!
下面,我要給prototype一個(gè)名副其實(shí)的定義:
prototype是函數(shù)的一個(gè)屬性,是函數(shù)的原型對(duì)象。
就是這么簡(jiǎn)單,能看明白嗎? prototype只能夠被 函數(shù) 調(diào)用。
別搞混了js的object對(duì)象和function函數(shù),js的對(duì)象和函數(shù)絕對(duì)是兩個(gè)概念,為什么?因?yàn)閖s的function函數(shù)可以new出object對(duì)象啊,是吧?這個(gè)你總該知道吧?
下面,來(lái)做試驗(yàn)證明我的結(jié)論。
//首先定義一個(gè)有名函數(shù)func
function func(){
}
alert(func.prototype);
你說(shuō),上面的代碼會(huì)alert什么呢?還會(huì)不會(huì)是undefined的呢?我敢肯定的告訴你絕對(duì)不是undefined的,因?yàn)楸救艘呀?jīng)alert過(guò)了,呵呵。
上面,彈出的窗口是:
沒(méi)錯(cuò),返回的就是對(duì)象,這回你肯相信我,能夠調(diào)用prototype的一定是函數(shù)了吧?object引用prototype的時(shí)候給你返回的是一個(gè)不是東西的東西undefined,函數(shù)引用prototype的時(shí)候給你返回一個(gè)真真實(shí)實(shí)存在的東西object的,這還不夠證明prototype是給函數(shù)用的嗎?還不能夠證明對(duì)象是不能引用prototype的嗎?呵呵,又多說(shuō)了。
上面我已經(jīng)說(shuō)過(guò),prototype是函數(shù)的一個(gè)屬性,也是函數(shù)的原型對(duì)象,而這里func函數(shù)引用prototype的時(shí)候返回的是一個(gè)對(duì)象object的,那么,結(jié)合這兩個(gè)概念,你能得出什么結(jié)論呢?我想通過(guò)這不難得出結(jié)論:
prototype是········函數(shù)的原型對(duì)象············,這能理解嗎?不能理解,沒(méi)有關(guān)系,我們?cè)賮?lái)做一個(gè)實(shí)驗(yàn),終于要用到文章開(kāi)始給你們介紹的一個(gè)函數(shù)JSON.stringify()了。
function func(){
}
alert(JSON.stringify(func.prototype));
還是引用上面的函數(shù)func,只不過(guò)這里返回的是JSON.stringify()函數(shù)的返回值。

你沒(méi)有看錯(cuò),這里alert的結(jié)果是一個(gè)空對(duì)象,這證明,prototype的的確確屬于函數(shù)的屬性,并且函數(shù)的prototype屬性的js數(shù)據(jù)類型是對(duì)象,明白不?為什么現(xiàn)在是一個(gè)空對(duì)象?你有沒(méi)有想過(guò)?為什么呢?請(qǐng)思考這個(gè)問(wèn)題三秒鐘,假如想不出來(lái),那么沒(méi)有關(guān)系,下面,我來(lái)解釋。
先看,實(shí)驗(yàn)代碼:
function func(){
}
func.prototype.name ='prototype是函數(shù)的的屬性,本質(zhì)是函數(shù)的原型對(duì)象';
alert(JSON.stringify(func.prototype))
你說(shuō),上面的代碼會(huì)alert出什么呢?請(qǐng)看下面:

你沒(méi)有看錯(cuò),此刻,終于alert出東西來(lái)了,我在這里給prototype賦于一個(gè)屬性name,所以,我這個(gè)時(shí)候在alert函數(shù)func的prototype時(shí),你看到有值了嗎?看到了prototype的屬性name值了嗎?現(xiàn)在再想想,為什么上面第一層alert函數(shù)func.prototype的時(shí)候,它是一個(gè)空對(duì)象呢?而現(xiàn)在它又是一個(gè)有值的對(duì)象呢?
原因很簡(jiǎn)單呢,因?yàn)榈谝淮蔚臅r(shí)候,我沒(méi)有給函數(shù)的屬性func.prototype賦予name屬性,也沒(méi)有給name屬性賦值啊,而現(xiàn)在我已經(jīng)給函數(shù)的屬性func.prototype賦予屬性name,并且賦值為········prototype是函數(shù)的的屬性,本質(zhì)是函數(shù)的原型對(duì)象······,所以,現(xiàn)在alert函數(shù)的屬性func.prototype的時(shí)候它就有值啦,對(duì)吧?
因此,這里得出結(jié)論:
prototype是函數(shù)的的屬性,本質(zhì)是函數(shù)的原型對(duì)象。
別以為js中只有對(duì)象才有屬性,通過(guò)這里,我們也可以知道,其實(shí)js的函數(shù)也是有屬性的,而且js的函數(shù)好像就只有這個(gè)屬性prototype,而且js的這個(gè)函數(shù)屬性同時(shí)還是函數(shù)的原型對(duì)象,你是不是被搞暈了?希望你沒(méi)有被搞暈才好。
為什么說(shuō)prototype是函數(shù)的一個(gè)屬性呢?因?yàn)椋挥泻瘮?shù)才能調(diào)用prototype,而且是以這樣的方式func.prototype調(diào)用的,這樣的方式調(diào)用東西是不是和對(duì)象調(diào)用屬性一模一樣呢?是的,就是因?yàn)楹瘮?shù)調(diào)用prototype的時(shí)候是和對(duì)象調(diào)用屬性的時(shí)候一樣的,我們才把prototype說(shuō)成是函數(shù)的一個(gè)屬性,而函數(shù)的這個(gè)屬性其實(shí)是一個(gè)對(duì)象(這個(gè)是不是對(duì)象,上面已經(jīng)證明了,這里就不再說(shuō)明),所以說(shuō),這個(gè)prototype就是函數(shù)的屬性,本質(zhì)是函數(shù)的原型對(duì)象。
這里為什么強(qiáng)調(diào)說(shuō)prototype的本質(zhì)是函數(shù)的原型對(duì)象呢?
下面看代碼證明,我的代碼很簡(jiǎn)單的:
//定義一個(gè)函數(shù)
function func(){
}
//給函數(shù)的屬性prototype賦予一個(gè)方法get
func.prototype.get=function(value){
return value;//很簡(jiǎn)單,你給我什么我就輸出什么
}
你說(shuō),怎么調(diào)用上面那個(gè)get方法?
我給你一點(diǎn)提示,get是屬于func函數(shù)的一個(gè)屬性函數(shù),既然是屬性函數(shù),那么我們?cè)趺凑{(diào)用呢?
很簡(jiǎn)單,屬性函數(shù)必須由它的對(duì)象來(lái)調(diào)用,那么我們?cè)趺传@取get的對(duì)象呢?很簡(jiǎn)單,用關(guān)鍵字new來(lái)實(shí)例化func函數(shù)的對(duì)象就行了嗎?是吧?
下面,實(shí)例化func函數(shù)的一個(gè)對(duì)象ob1:
var ob1 = new func();
//用func實(shí)例化出來(lái)的對(duì)象來(lái)調(diào)用get屬性函數(shù)
alert(ob1.get('hello,prototype原型對(duì)象'));

沒(méi)錯(cuò),用func函數(shù)實(shí)例化出來(lái)的對(duì)象ob1,確實(shí)能夠調(diào)用get函數(shù),上面已經(jīng)利用ob1調(diào)用get函數(shù)alert出來(lái)了,這就證明func函數(shù)的實(shí)例對(duì)象是擁有g(shù)et這個(gè)屬性函數(shù)的,對(duì)吧?這么明顯,就不用說(shuō)明了吧。
如果,你不信必須要用實(shí)例化func的對(duì)象來(lái)調(diào)用get函數(shù),你可以試試直接用func調(diào)用get函數(shù),也就是說(shuō),你可以嘗試著func.get()調(diào)用一下get函數(shù)看看,看func它到底能不能夠直接調(diào)用get函數(shù)。我想一定報(bào)錯(cuò),呵呵,原因是什么,你自己想。
那么,說(shuō)了這么多,我還是沒(méi)有說(shuō)明,為什么我說(shuō)prototype的本質(zhì)是函數(shù)的原型對(duì)象啊?對(duì)吧?
請(qǐng)看,下面的代碼:
var ob2 = new func();
//用func實(shí)例化出來(lái)的對(duì)象來(lái)調(diào)用get屬性方法
alert(ob2.get('我依然是func實(shí)例化出來(lái)的對(duì)象'));

看到?jīng)]有,我還是再次利用func函數(shù)實(shí)例化一個(gè)ob2,這個(gè)對(duì)象依然能夠調(diào)用get屬性函數(shù),這說(shuō)明什么了呢?這說(shuō)明了,利用func對(duì)象實(shí)例化的所有對(duì)象都可以調(diào)用get這個(gè)屬性函數(shù)。既然如此,你說(shuō),prototype這個(gè)屬性如果不是函數(shù)func的原型對(duì)象的話,那么為什么給prototype賦予的屬性函數(shù)get能夠被func所有實(shí)例化的對(duì)象所調(diào)用呢?假如prototype的本質(zhì)不是func函數(shù)的原型對(duì)象,那么依據(jù)func函數(shù)實(shí)例化出來(lái)的對(duì)象就不可能一個(gè)個(gè)都能夠調(diào)用get這個(gè)屬性方法,對(duì)吧?為什么?我們來(lái)個(gè)比例,你說(shuō),一個(gè)不是源頭的東西,它能影響到所有的東西嗎?不能夠吧?因此,這里得出結(jié)論:
prototype是函數(shù)的一個(gè)屬性,本質(zhì)就是函數(shù)的原型對(duì)象。
整篇文章就是為了說(shuō)明這個(gè)結(jié)論。無(wú)他。希望看官能看懂這篇文章。對(duì)于prototype的應(yīng)用下篇文章再講,在此打住。
特別指出:
- Array.prototype是一個(gè)數(shù)組
- String.prototype是一個(gè)字符串
- Object.prototype是一個(gè)對(duì)象
這三個(gè)特殊例子,不像構(gòu)造函數(shù)的prototype一樣,當(dāng)然,假如你真的理解prototype是函數(shù)的一個(gè)原型對(duì)象的話,你應(yīng)該知道,數(shù)組的原型對(duì)象應(yīng)該是一個(gè)數(shù)組,而不可能是一個(gè)對(duì)象吧?字符串的原型對(duì)象應(yīng)該是字符串而不可能是對(duì)象吧?詳情請(qǐng)看下一篇文章。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Uniapp全局消息提示以及其組件的實(shí)現(xiàn)方法
當(dāng)時(shí)在做登錄那邊需要做一些交互,所以必不可少要用到消息提示框,下面這篇文章主要給大家介紹了關(guān)于Uniapp全局消息提示以及其組件的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
如何用RxJS實(shí)現(xiàn)Redux Form
這篇文章主要介紹了如何用RxJS實(shí)現(xiàn)Redux Form,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
javascript簡(jiǎn)單實(shí)現(xiàn)等比例縮小圖片的方法
這篇文章主要介紹了javascript簡(jiǎn)單實(shí)現(xiàn)等比例縮小圖片的方法,涉及javascript針對(duì)頁(yè)面元素屬性的讀取、運(yùn)算及設(shè)置相關(guān)技巧,需要的朋友可以參考下2016-07-07
JS實(shí)現(xiàn)頭條新聞的經(jīng)典輪播圖效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)頭條新聞的經(jīng)典輪播圖效果,涉及javascript圖片輪播切換相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
淺談js對(duì)象的創(chuàng)建和對(duì)6種繼承模式的理解和遐想
下面小編就為大家?guī)?lái)一篇淺談js對(duì)象的創(chuàng)建和對(duì)6種繼承模式的理解和遐想。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
JS實(shí)現(xiàn)遮罩層效果的簡(jiǎn)單實(shí)例
這篇文章介紹了JS實(shí)現(xiàn)遮罩層效果的簡(jiǎn)單實(shí)例,有需要的朋友可以參考一下2013-11-11
IE 上下滾動(dòng)展示模仿Marquee機(jī)制
最近要做一個(gè)大屏幕展示上下滾動(dòng)的列表,而IE自帶的Marquee,無(wú)法滿足需要,隨自己寫了一個(gè)滾動(dòng)機(jī)制,代碼在附件中2009-12-12

