DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 簡單理解js的prototype屬性及使用
簡單理解js的prototype屬性及使用
編輯:關於JavaScript     

在進入正文之前,我得先說說我認識js的prototype這個東西的曲折過程。

百度js的prototype的文章,先看看,W3School關於prototype的介紹:

你覺得這概念適合定義js的prototype這個東西嗎?你是否也認為prototype是一個object對象的屬性呢?是的話,請認真認真看我這篇文章,因為這篇文章會毀滅你的人生三觀,呵呵,就是有這麼嚴重,因為本人就是被這個定義給害慘的。

不得不說,看了網上的一些介紹prototype的文章,基本上都說prototype是對象的一個屬性,於是,我也堅定的認為prototype是一個對象的屬性,所以,我被了坑好久好久,由此,引發的後果就是,我一次次的誤解別人寫的含有prototype的js代碼,也就是當別人亮出js的prototype這個屬性來寫js代碼時,我看著他們寫的代碼都是 ····一頭霧水·····  ,悲催啊!所以,我恨死prototype這個東西了,因此,在這裡,我今天必須把js的prototype屬性道個明明白白。看官,請擦亮你的眼睛,仔細看我下面的實驗。

當然,我希望諸位看官也能夠靜下心來,把我下面的實驗重新做一遍,好證明我的結論是正確的。

同時,也為了證明·····我沒有····騙你們·····,呵呵,廢話不多說了,下面進入實驗階段。

先介紹一個下面要用到的函數,JSON.stringify(value)。

這個函數的作用是:把傳入的參數value變成字符串,它有三個參數,第一個參數是必須的,其余的兩個參數可填可不填。

關於JSON.stringify函數的作用請看這篇文章。http://www.jb51.net/article/29893.htm,這裡說的很清楚。

首先,測試W3Schol的定義到底行不行的通:

如果,真如W3Schol所說的那樣,prototype是object的一個屬性,那麼,我們來創建一個對象,看看這個對象的prototype到底是啥。

var ob = { };//超級簡單的空對象
alert(JSON.stringify(ob.prototype));

你覺得上面的代碼會alert出什麼呢?既然prototype是object的一個屬性,那麼上面肯定能夠獲取到什麼東西對吧?但是,如果你拿這段代碼去做實驗了,你會被打臉的,因為它alert的東西是·········undefined··········,也就是說object這個屬性prototype不是個東西,很殘酷吧,但現實就是這樣,任何對象引用prototype都會出現undefined,不信,你可以試一試。

我可以很明白的告訴你,prototype絕對不是給對象用的,對象根本沒辦法引用prototype這個屬性,它真正的屬主,其實是···········函數········,記住,能夠引用prototype的東西絕對是函數,絕對是函數,絕對是函數,prototype是屬於函數的一個屬性,prototype是屬於函數的一個屬性,prototype是屬於函數的一個屬性,能夠引用它的只有·····函數····,能夠引用它的只有·····函數·····,能夠引用它的只有····函數····,函數,函數,函數,重要的事情一定要說千百遍,呵呵,因為只有明確這一點,下面,你才明白我要講的東西。別怪我這麼墨跡啊!

下面,我要給prototype一個名副其實的定義:

prototype是函數的一個屬性,是函數的原型對象。

就是這麼簡單,能看明白嗎? prototype只能夠被   函數     調用

別搞混了js的object對象和function函數,js的對象和函數絕對是兩個概念,為什麼?因為js的function函數可以new出object對象啊,是吧?這個你總該知道吧?

下面,來做試驗證明我的結論。   

//首先定義一個有名函數func
function func(){
  
}
alert(func.prototype);

你說,上面的代碼會alert什麼呢?還會不會是undefined的呢?我敢肯定的告訴你絕對不是undefined的,因為本人已經alert過了,呵呵。

上面,彈出的窗口是:

 

沒錯,返回的就是對象,這回你肯相信我,能夠調用prototype的一定是函數了吧?object引用prototype的時候給你返回的是一個不是東西的東西undefined,函數引用prototype的時候給你返回一個真真實實存在的東西object的,這還不夠證明prototype是給函數用的嗎?還不能夠證明對象是不能引用prototype的嗎?呵呵,又多說了。

上面我已經說過,prototype是函數的一個屬性,也是函數的原型對象,而這裡func函數引用prototype的時候返回的是一個對象object的,那麼,結合這兩個概念,你能得出什麼結論呢?我想通過這不難得出結論:

prototype是········函數的原型對象············,這能理解嗎?不能理解,沒有關系,我們再來做一個實驗,終於要用到文章開始給你們介紹的一個函數JSON.stringify()了。

function func(){
  
}
alert(JSON.stringify(func.prototype));

還是引用上面的函數func,只不過這裡返回的是JSON.stringify()函數的返回值。

你沒有看錯,這裡alert的結果是一個空對象,這證明,prototype的的確確屬於函數的屬性,並且函數的prototype屬性的js數據類型是對象,明白不?為什麼現在是一個空對象?你有沒有想過?為什麼呢?請思考這個問題三秒鐘,假如想不出來,那麼沒有關系,下面,我來解釋。

先看,實驗代碼:

function func(){
  
}
func.prototype.name ='prototype是函數的的屬性,本質是函數的原型對象';
alert(JSON.stringify(func.prototype))

你說,上面的代碼會alert出什麼呢?請看下面:

你沒有看錯,此刻,終於alert出東西來了,我在這裡給prototype賦於一個屬性name,所以,我這個時候在alert函數func的prototype時,你看到有值了嗎?看到了prototype的屬性name值了嗎?現在再想想,為什麼上面第一層alert函數func.prototype的時候,它是一個空對象呢?而現在它又是一個有值的對象呢?

原因很簡單呢,因為第一次的時候,我沒有給函數的屬性func.prototype賦予name屬性,也沒有給name屬性賦值啊,而現在我已經給函數的屬性func.prototype賦予屬性name,並且賦值為········prototype是函數的的屬性,本質是函數的原型對象······,所以,現在alert函數的屬性func.prototype的時候它就有值啦,對吧?

因此,這裡得出結論:

prototype是函數的的屬性,本質是函數的原型對象。

別以為js中只有對象才有屬性,通過這裡,我們也可以知道,其實js的函數也是有屬性的,而且js的函數好像就只有這個屬性prototype,而且js的這個函數屬性同時還是函數的原型對象,你是不是被搞暈了?希望你沒有被搞暈才好。

為什麼說prototype是函數的一個屬性呢?因為,只有函數才能調用prototype,而且是以這樣的方式func.prototype調用的,這樣的方式調用東西是不是和對象調用屬性一模一樣呢?是的,就是因為函數調用prototype的時候是和對象調用屬性的時候一樣的,我們才把prototype說成是函數的一個屬性,而函數的這個屬性其實是一個對象(這個是不是對象,上面已經證明了,這裡就不再說明),所以說,這個prototype就是函數的屬性,本質是函數的原型對象。

這裡為什麼強調說prototype的本質是函數的原型對象呢?

下面看代碼證明,我的代碼很簡單的:

//定義一個函數
  function func(){
  
  }
  //給函數的屬性prototype賦予一個方法get
  func.prototype.get=function(value){
    return value;//很簡單,你給我什麼我就輸出什麼
  }

你說,怎麼調用上面那個get方法?

我給你一點提示,get是屬於func函數的一個屬性函數,既然是屬性函數,那麼我們怎麼調用呢?

很簡單,屬性函數必須由它的對象來調用,那麼我們怎麼獲取get的對象呢?很簡單,用關鍵字new來實例化func函數的對象就行了嗎?是吧?

下面,實例化func函數的一個對象ob1:

var ob1 = new func();
//用func實例化出來的對象來調用get屬性函數
alert(ob1.get('hello,prototype原型對象'));

沒錯,用func函數實例化出來的對象ob1,確實能夠調用get函數,上面已經利用ob1調用get函數alert出來了,這就證明func函數的實例對象是擁有get這個屬性函數的,對吧?這麼明顯,就不用說明了吧。

如果,你不信必須要用實例化func的對象來調用get函數,你可以試試直接用func調用get函數,也就是說,你可以嘗試著func.get()調用一下get函數看看,看func它到底能不能夠直接調用get函數。我想一定報錯,呵呵,原因是什麼,你自己想。

那麼,說了這麼多,我還是沒有說明,為什麼我說prototype的本質是函數的原型對象啊?對吧?

請看,下面的代碼:

 var ob2 = new func();
//用func實例化出來的對象來調用get屬性方法
alert(ob2.get('我依然是func實例化出來的對象'));

看到沒有,我還是再次利用func函數實例化一個ob2,這個對象依然能夠調用get屬性函數,這說明什麼了呢?這說明了,利用func對象實例化的所有對象都可以調用get這個屬性函數。既然如此,你說,prototype這個屬性如果不是函數func的原型對象的話,那麼為什麼給prototype賦予的屬性函數get能夠被func所有實例化的對象所調用呢?假如prototype的本質不是func函數的原型對象,那麼依據func函數實例化出來的對象就不可能一個個都能夠調用get這個屬性方法,對吧?為什麼?我們來個比例,你說,一個不是源頭的東西,它能影響到所有的東西嗎?不能夠吧?因此,這裡得出結論:

prototype是函數的一個屬性,本質就是函數的原型對象。

整篇文章就是為了說明這個結論。無他。希望看官能看懂這篇文章。對於prototype的應用下篇文章再講,在此打住。

特別指出:

  • Array.prototype是一個數組
  • String.prototype是一個字符串
  • Object.prototype是一個對象

這三個特殊例子,不像構造函數的prototype一樣,當然,假如你真的理解prototype是函數的一個原型對象的話,你應該知道,數組的原型對象應該是一個數組,而不可能是一個對象吧?字符串的原型對象應該是字符串而不可能是對象吧?詳情請看下一篇文章。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved