?

Javascript繼承（上）——對象構建

?

?

Javascript真的需要類（Class）么？

我們首先先看下其他有類（Class）的面向對象語言（如：Java）的一些特性。

?

父類與子類 ?

父類（Superclass）和子類（Subclass），并不是為了解決父親與兒子的問題，而是為了解決類的包含關系的，我們用S _ub 表示“子類”，用S _up 表示“父類”，則有：

S _{ub ?} S _up

這是有區別的，例如通常我們能夠將子類當成父類來使用，但認人的時候我們并不能把兒子當成父親。

或者可以這么說，父類和子類不是為了解決類間存在相同方法或者屬性的。

?

舉個例子

有人喜歡這樣做：

我們需要一些動物的類，以便在屏幕上創建一些移動的動物，但移動的動物有些在空中飛行，有些在路上行走。

所以創建兩個父類，一個是Fly，一個是Walk：

        
          Class Fly{
    fly(){}
}

Class Walk{
    walk(){}
}
        
      

然后獅子們（還可以再建些其他的在路上行走的動物）就屬于Walk類，老鷹們（也還可以再建些其他在天上飛行的動物）就屬于Fly類：

        
          Class Lion extend Walk{
        
        
          }

Class Eagle extend Fly{
        
        
}
      

最后對Lion和Eagle類創建一些實例，調用相應的方法，屏幕上就會有一些獅子和老鷹在移動了。

但這可能并不是一個好的設計，比如明天老板突然一拍大腦，他要有一種叫天馬（ Pegasus ）的動物，它們即會在天上飛，又會在路上走，時而要飛行，時候要行走。

在這種情況下，這個方案就全然無用了。

?

為什么這個設計失敗了？

繼承是有條件的，子類必須能嚴格的向上轉型（變成父類）。

在上面這個例子中：

• 獅子（Lion）被假設等同于行走動物（Walk），老鷹（Eagle）被假設等同于飛行動物（Fly）。
• 這看起來很成功，因為子類能嚴格向上轉型，但他有隱患。
• 當有一種天馬（Pegasus）介入到里面的時候，我們才發現獅子其實只是“會行走的動物”，老鷹其實只是“會飛行的動物”，這不意味著動物一輩子只能飛行或者行走，所以即會飛行又會行走的天馬就找不到自己的歸屬了。

這個例子很好的證明了，子類和父類不是為了解決類間具有相同的方法的：

一些動物都會行走，需要擁有行走（Walk）這個方法，但這不應該由子類和父類實現。

?

組合

我們可以這樣解決這個問題：

      
        Class Lion{
    walker 
      
      = 
      
        new
      
      
         Walk();
    walk(){
        
      
      
        return
      
      
         walker.walk();
    }
}

Class Eagle{
    flyer 
      
      = 
      
        new
      
      
         Fly();
    fly(){
        
      
      
        return
      
      
         flyer.fly();
    }
}

Class Pegasus{
    walker 
      
      = 
      
        new
      
      
         Walk();
    flyer 
      
      = 
      
        new
      
      
         Fly();
    walk(){
        
      
      
        return
      
      
         walker.walk();
    }
    fly(){
        
      
      
        return
      
      
         flyer.fly();
    }
}
      
    

組合是簡單的在新類內部創建原有類對象。所以組合才是為了解決類間具有相同的方法的。在這個例子里面：

Walk被當成“會行走的動物應該擁有的方法集合”，同理Fly被當成“會行走的動物應該擁有的方法集合”，所以對于天馬（Pegasus），我們只需要對Walk和Fly進行組合就行了。

?

繼承的目的

繼承并非代碼復用的唯一方法，但繼承有他的優勢：

子類可以向上轉型變成父類。

這樣我們就可以忽略所有的子類差異，當成相同的類來操作，例如：

我們有方法fn(A)，fn(B)，這兩個方法實際是相似的，我們想復用他們。

則我們可以通過設立一個父類C，其中A是C的子類，B是C的子類，那么fn(C)就可以復用在A和B身上了。

?

回到Javascript

但回到Javascript，我們發現上面的例子是不成立的。

因為Javascript本身是弱類型語言，它并不會在操作前（因為他不用編譯）關注自己操作的對象類型是什么。他只會執行成功，或者發生錯誤。

這時候，繼承顯得并不必要了。那么類也就同樣不是必要的了。

I have been writing JavaScript for 8 years now, and I have never once found need to use an uber function. The super idea is fairly important in the classical pattern, but it appears to be unnecessary in the prototypal and functional patterns. I now see my early attempts to support the classical model in JavaScript as a mistake.

—— Douglas Crockford

我寫Javascript代碼已經8年了，但我從來沒有發現需要使用超類函數。超類的想法在古典設計模式是非常重要的，但這在以原型和函數為基調的模式中并不必要。我現在覺得，早期我試圖讓Javascript支持經典模式是一個錯誤的決定。

?

安全環境

當然，你可以手動去判斷類型，控制參數的類型，進而提供一個較為安全的環境。

例如同樣作為弱類型腳本語言的PHP，為了模擬強類型面向對象語言設置安全環境，不得不這么做：

        
          class
        
        
           ShopProductWriter{
    
        
        
          public
        
        
           function write( $shopProduct ){
        
        
        
          if
        
        ( ! ( $shopProduct 
        
          instanceof
        
         CdProduct ) && ! ( $shopProduct 
        
          instanceof
        
        
           BookProduct ) ){
            die( 
        
        "輸入錯誤的類型"
        
           );
        }
        
        
        
          //
        
        
          如果類型正確就執行一些代碼
        
        
              }
}
        
      

——PHP Objects, Patterns, and Practtice Third Edition . Matt Zandstra

但這只是一個非常丑陋的方案而已。

?

經典繼承語法糖實現

不過經典繼承依然是許多人喜歡的方式。所以YUI、Prototype、Dojo、MooTools都提供了自己的實現方案。

其中較為常見的方案中，語法大概是這樣的：

      
        var
      
       Person =
      
         Class.extend({
  init: 
      
      
        function
      
      
        (isDancing){
    
      
      
        this
      
      .dancing =
      
         isDancing;
  }
});

      
      
        var
      
       Dancer =
      
         Person.extend({
  init: 
      
      
        function
      
      
        (){
    
      
      
        this
      
      ._super( 
      
        true
      
      
         );
  }
});


      
      
        var
      
       n = 
      
        new
      
      
         Dancer();
alert(n.dancing); 
      
      
        //
      
      
        true
      
    

最重要的實現是對this._super的實現，其實extend函數只是將傳進來的對象重新組裝了一下，變成一個原型對象，新構造函數的prototype里。

具體實現請查看參考文獻1。

?

ECMAScript 6的經典繼承語法糖

對于類庫各自實現，導致經典繼承語法眾多，ECMA組織貌似不太滿意，他們試圖在ECMAScript 6中加入更加直觀的經典繼承語法糖：

      
        class Animal {
    constructor(name) {
        
      
      
        this
      
      .name =
      
         name;
    }

    sayName() {
        console.log(
      
      
        this
      
      
        .name);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);
    }

    bark() {
        console.log(
      
      "Woof!"
      
        );
    }
}
      
    

?

總結

• 實際上，Javascript中經典繼承并不是必要的。
• 然而基于許多人喜歡經典繼承模型，所以在新版的ECMAScript 6中提供了相關語法糖。
• 不過在中國，前端想廣泛使用該語法糖應該是一個遙遠的故事……

?

那Javascript特有的繼承呢？

?

原型繼承

原型繼承不是解決經典繼承中的集合包含關系的，實際上原型繼承是解決從屬關系的，用數學表達就是：

　　S _ub. prototype _{?∈ ?} S _up

子級構造函數（子類型）原型是一個父級構造函數（父類型）構建的實例對象。原型實際上是子類型實例中需要共享的東西：

      
        function
      
      
         Being(){
    
      
      
        this
      
      .living = 
      
        true
      
      
        ;
}
Being.prototype.walk 
      
      = 
      
        function
      
      
        (){
    alert(
      
      "I' m walking"
      
        );
};


      
      
        function
      
      
         Dancer(){
    
      
      
        this
      
      .dancing = 
      
        true
      
      
        ;
}
Dancer.prototype 
      
      = 
      
        new
      
      
         Being();
Dancer.prototype.dance 
      
      = 
      
        function
      
      
        (){
    alert(
      
      "I'm dancing"
      
        );
};


      
      
        var
      
       one = 
      
        new
      
      
         Dancer();
one.walk();
one.dance();
      
    

利用借用、寄生等技術可以產生很多不同的繼承效果，但這些技術都只是為了解決原型繼承中屬性和方法一些公用與非公用的問題罷了。由于篇幅問題就不展開討論了，有興趣可以參考《Javascript高級程序設計》相關內容。

?

思考題?

1.　　文章開頭關于天馬（Pegasus）的題目，如果在Javascript上，應該如何設計呢？例如我們有下列兩個類型：

      
        function
      
      
         Walk(){
    
      
      
        this
      
      .walk = 
      
        function
      
      
        (){
        
      
      
        //
      
      
        walk
      
      
            };
}


      
      
        function
      
      
         Fly(){
    
      
      
        this
      
      .fly = 
      
        function
      
      
        (){
        
      
      
        //
      
      
        fly
      
      
            };
}
      
    

?

?

Simple JavaScript Inheritance . John Resig?.? March 20th, 2008

JavaScript Inheritance – How And Why ?. Robert Nyman?.? October 6, 2008

JavaScript需要類嗎?? ?.?紫云飛（譯） .? 2012-10-17

Javascript繼承（下）——干嘛要繼承