JS沒有提供所謂的類繼承，據(jù)說在2.0中要加入這種繼承方式，但是要所有瀏覽器都實(shí)現(xiàn)2.0的特性那肯定又得N多年。昨天看了crockford 的一個(gè)視頻，里面講解了一下JS的繼承方式，按照PPT里面說的，一共分了三類：Prototypal，pseudoclassical，Parasitic Inheritance。

下面主要介紹一下原型繼承：When a function object is created, it is given a prototype member which is an object containing a constructor member which is a reference to the function object.

這里先區(qū)別一下什么是prototype屬性，和constructor屬性。也就是要區(qū)別什么是構(gòu)造器，函數(shù)，對(duì)象實(shí)例。


其實(shí)在JS中構(gòu)造器就是函數(shù)，函數(shù)就是構(gòu)造器，對(duì)象實(shí)例就是通過var obj=new 函數(shù)();這種形式新建出來的實(shí)例。區(qū)別這些，在說prototype和constructor。從上面的英文中可以看出，prototype是個(gè)對(duì)象，里面定義了一個(gè)constructor，那么我們可以推論出，constructor是對(duì)象實(shí)例的屬性！而不是函數(shù)（構(gòu)造器）的屬性。反過來，prototype是函數(shù)（構(gòu)造器）的屬性，而不是實(shí)例的屬性！

我們可以看出MyObj是不具有JS意義下的constructor屬性的，為什么這么說呢。alert(MyObj.constructor)這行代碼還是有東西的：

這是因?yàn)镸yObj是個(gè)函數(shù)，所以他的構(gòu)造器就是本地的Function對(duì)象，也就是說MyObj是由Function構(gòu)造出來的。但是這個(gè)對(duì)我們意義不大，因?yàn)檫@已經(jīng)不再JS層面上了。所以這里可以認(rèn)為MyObj不具有JS意義下的constrcutor屬性。

alert(obj.prototype)通過這行我們可以看出，obj實(shí)例是不具有原型屬性的。OK，現(xiàn)在區(qū)別清楚了這些，可以看原型繼承了。如果不區(qū)別清楚這個(gè)，恐怕下面會(huì)看的很暈。

注意這行:Hoozit.prototype = new Gizmo();這行就是原型繼承的核心代碼。

還有要注意的是只有在new Gizmo()之后，才能添加test等其它方法，這個(gè)順序不能倒過來！如果你先添加了test等方法，然后在new Gizmo()，那么原來添加的那些方法都將找不到了。具體原因，下面分析完了，也就清楚了。


仔細(xì)看一下上面的圖，這個(gè)就是原型繼承的圖示。左下角new Hoozit(stirng)代表的是新建的一個(gè)對(duì)象。為了以下表述方便，我們管他叫objH1。最右邊的灰色的箭頭就是原型繼承鏈。

根據(jù)文章開頭的那段英文，我們知道每個(gè)函數(shù)都有一個(gè)原型，這個(gè)原型是個(gè)對(duì)象，并且對(duì)象里面包含一個(gè)constructor屬性。其中Object，Gizmo，Hoozit就是函數(shù)，可以看出里面都有一個(gè)prototype項(xiàng)，而這個(gè)prototype又指向一個(gè)對(duì)象，這個(gè)對(duì)象里面又有一個(gè)constructor屬性，constructor又指回自身。


但是這里有一個(gè)意外，我們發(fā)現(xiàn)Hoozit原型對(duì)象里面沒有constructor屬性，而這個(gè)函數(shù)的右邊卻有一個(gè)空的對(duì)象，里面包含了一個(gè)constructor屬性？為什么呢？
這個(gè)問題會(huì)發(fā)生在原型繼承過程中。主要就是因?yàn)镠oozit.prototype = new Gizmo();這句話引起的。這句話的意思就是新建了一個(gè)Gizmo對(duì)象并且賦給Hoozit的原型！那么，那么，仔細(xì)想想，是不是Hoozit原有的原型對(duì)象就被斷開了呢？？沒錯(cuò)，就是這樣。所以那個(gè)有constructor屬性的空對(duì)象再也訪問不到了！
那現(xiàn)在又有一個(gè)疑問了，通過Hoozit.prototype = new Gizmo();這行代碼之后，Hoozit.prototype.constructor指向哪里了呢？很簡單，知道(new Gizmo()).constructor指向哪里嗎？通過上面的圖，可以清晰的看出來指向的是Gizmo函數(shù)。所以我們斷定，現(xiàn)在的Hoozit.prototype.constructor也指向了那里！

上面這行代碼驗(yàn)證了我們的猜測(cè)！OK，上面講完了函數(shù)（構(gòu)造器一邊），然后我們?cè)賮碚f實(shí)例對(duì)象這邊：每個(gè)實(shí)例對(duì)象都有一個(gè)constructor屬性，并且指向構(gòu)造器（函數(shù)）。而且每個(gè)new出來的實(shí)例都是某個(gè)原型constructor的實(shí)例：

上面為什么不拿objH1舉例呢，因?yàn)樗腸onstructor已經(jīng)不是他自己的了，而是Gizmo對(duì)象的，那么我們驗(yàn)證一下：

看到了嗎？其實(shí)這個(gè)問題也不算什么大問題，如果你要不使用instanceof檢查父對(duì)象或者使用constructor進(jìn)行原型回溯的話，這個(gè)問題可以不解決了。如果想解決這個(gè)問題怎么辦呢？在Prototype框架的Class.create方法里面給出了一種方法，具體可以參考：http://blog.csdn.net/kittyjie/archive/2009/07/13/4345568.aspx
下面我簡單說一下兩種方法：

最新評(píng)論