一、面相對(duì)象繼承機(jī)制
      這個(gè)實(shí)例使用UML很好的解釋了繼承機(jī)制。
      說明繼承機(jī)制最簡(jiǎn)單的方式是，利用一個(gè)經(jīng)典的例子就是幾何形狀。實(shí)際上，幾何形狀只有兩種，即橢圓形(是圓形的)和多邊形(具有一定數(shù)量的邊)。圓是橢圓的一種，它只有一個(gè)焦點(diǎn)。三角形、矩形和五邊形都是多邊形的一種，具有不同數(shù)量的邊。正方形是矩形的一種，所有的邊等長(zhǎng)。這就構(gòu)成了一種完美的繼承關(guān)系，很好的解釋了面向?qū)ο蟮睦^承機(jī)制。
       在這個(gè)例子中，形狀是橢圓形和多邊形的基類(通常我們也可以叫它父類，所有類都由它繼承而來)。橢圓具有一個(gè)屬(foci)，說明橢圓具有的焦點(diǎn)的個(gè)數(shù)。圓形繼承了橢圓形，因此圓形是橢圓形的子類，橢圓形是圓形的超類。同樣，三角形、矩形和五邊形都是多邊形的子類，多邊形是它們的超類。最后，正方形繼承了矩形。
      最好用圖來解釋這種繼承關(guān)系，這是 UML(統(tǒng)一建模語言)的用武之地。UML的主要用途之一是，可視化地表示像繼承這樣的復(fù)雜對(duì)象關(guān)系。下面的圖示是解釋形狀和它的子類之間關(guān)系的UML圖示：

      在UML中，每個(gè)方框表示一個(gè)類，由類名說明。三角形 、矩形和五邊形頂部的線段匯集在一起，指向形狀，說明這些類都由形狀繼承而來。同樣，從正方形指向矩形的箭頭說明了它們之間的繼承關(guān)系。
二、ECMAScript繼承機(jī)制的實(shí)現(xiàn)
      要用ECMAScript實(shí)現(xiàn)繼承機(jī)制，您可以從要繼承的基類入手。所有開發(fā)者定義的類都可作為基類。出于安全原因，本地類和宿主類不能作為基類，這樣可以防止公用訪問編譯過的瀏覽器級(jí)的代碼，因?yàn)檫@些代碼可以被用于惡意攻擊。
       選定基類后，就可以創(chuàng)建它的子類了。是否使用基類完全由你決定。有時(shí)，你可能想創(chuàng)建一個(gè)不能直接使用的基類，它只是用于給子類提供通用的函數(shù)。在這種情況下，基類被看作抽象類。盡管ECMAScript并沒有像其他語言那樣嚴(yán)格地定義抽象類，但有時(shí)它的確會(huì)創(chuàng)建一些不允許使用的類。通常，我們稱這種類為抽象類。
      創(chuàng)建的子類將繼承超類的所有屬性和方法，包括構(gòu)造函數(shù)及方法的實(shí)現(xiàn)。記住，所有屬性和方法都是公用的，因此子類可直接訪問這些方法。子類還可添加超類中沒有的新屬性和方法，也可以覆蓋超類的屬性和方法。由于JS并不是正統(tǒng)的面向?qū)ο笳Z言，一些名詞也需要做出改變。
三、ECMAScript繼承的方式
      ECMAScript語言中將被繼承的類(基類)稱為超類型，子類(或派生類)稱為子類型。和其他功能一樣，ECMAScript實(shí)現(xiàn)繼承的方式不止一種。這是因?yàn)镴avaScript中的繼承機(jī)制并不是明確規(guī)定的，而是通過模仿實(shí)現(xiàn)的。這意味著所有的繼承細(xì)節(jié)并非完全由解釋程序處理。作為開發(fā)者，你有權(quán)決定最適用的繼承方式。下面為您介紹幾種具體的繼承方式。
(1)原型鏈方式
      繼承這種形式在ECMAScript中原本是用于原型鏈的。上一篇博文已經(jīng)介紹了創(chuàng)建對(duì)象的原型方式。原型鏈擴(kuò)展了這種方式，以一種有趣的方式實(shí)現(xiàn)繼承機(jī)制。prototype 對(duì)象是個(gè)模板，要實(shí)例化的對(duì)象都以這個(gè)模板為基礎(chǔ)。總而言之，prototype 對(duì)象的任何屬性和方法都被傳遞給那個(gè)類的所有實(shí)例。原型鏈利用這種功能來實(shí)現(xiàn)繼承機(jī)制。我們來看一個(gè)例子：

function A() {//超類型A中必須沒有參數(shù) 
 this.color = "red"; 
 this.showColor = function () { 
  return this.color; 
 }; 
}; 
function B() {//子類型B 
 this.name = "John"; 
 this.showName = function () { 
  return this.name; 
 }; 
}; 
B.prototype = new A();//子類型B繼承了超類型A，通過原型，形成鏈條 
var a = new A(); 
var b = new B(); 
document.write(a.showColor());//輸出：blue 
document.write(b.showColor());//輸出：red 
document.write(b.showName());//輸出：John 

      在原型鏈中，instanceof運(yùn)算符的運(yùn)行方式也很獨(dú)特。對(duì)B的所有實(shí)例，instanceof為A和B都返回true。ECMAScript的弱類型世界中，這是極其有用的工具，不過使用對(duì)象冒充時(shí)不能使用它。例如：

var b = new B(); 
document.write(b instanceof A);//輸出：true 
document.write(b instanceof B);//輸出：true 

       使用原型鏈方式實(shí)現(xiàn)了繼承，但是這種方式無法共享和子類型給超類型傳遞參數(shù)。我們可以借用構(gòu)造函數(shù)方式(也就是對(duì)像冒充)的方式來解決這兩個(gè)問題。
(2)對(duì)象冒充方式
      對(duì)象冒充方式的其原理如下：構(gòu)造函數(shù)使用this關(guān)鍵字給所有屬性和方法賦值(即采用對(duì)象聲明的構(gòu)造函數(shù)方式)。因?yàn)闃?gòu)造函數(shù)只是一個(gè)函數(shù)，所以可使A構(gòu)造函數(shù)成為B的方法，然后調(diào)用它。B就會(huì)收到A的構(gòu)造函數(shù)中定義的屬性和方法。例如，用下面的方式改寫上面的例子創(chuàng)建對(duì)象A和B：
call()方法

function A(Color) {//創(chuàng)建超類型A 
 this.color = Color; 
 this.showColor = function () { 
   return this.color; 
 }; 
}; 
function B(Color,Name) {//創(chuàng)建子類型Ｂ 
 A.call(this, Color);//對(duì)象冒充，給超類型傳參 
 this.name = Name;//新添加的屬性 
 this.showName = 
}; 
var a = new A("blue"); 
var b = new B("red", "John"); 
document.write(a.showColor());//輸出：blue 
document.write(b.showColor());//輸出：red 
document.write(b.showName());//輸出：John 

apply()方法
和上面call()方法唯一的區(qū)別就是在子類型B中的代碼：
A.call(this,arguments);//對(duì)象冒充，給超類型傳參 
      當(dāng)然，只有超類型中的參數(shù)順序與子類型中的參數(shù)順序完全一致時(shí)才可以傳遞參數(shù)對(duì)象。如果不是，就必須創(chuàng)建一個(gè)單獨(dú)的數(shù)組，按照正確的順序放置參數(shù)。
      使用對(duì)象冒充方式雖然解決了共享和傳參的問題，但是沒有原型，復(fù)用就更不可能了，所以我們組合上述的兩種方式，即原型鏈方式和對(duì)象冒充的方式實(shí)現(xiàn)JS的繼承。
(3)混合方式
      這種繼承方式使用構(gòu)造函數(shù)定義類，并非使用任何原型。對(duì)象冒充的主要問題是必須使用構(gòu)造函數(shù)方式，這不是最好的選擇。不過如果使用原型鏈，就無法使用帶參數(shù)的構(gòu)造函數(shù)了。開發(fā)者如何選擇呢？答案很簡(jiǎn)單，兩者都用。由于這種混合方式使用了原型鏈，所以instanceof運(yùn)算符仍能正確運(yùn)行。
       在上一篇文章，創(chuàng)建對(duì)象的最好方式是用構(gòu)造函數(shù)定義屬性，用原型定義方法。這種方式同樣適用于繼承機(jī)制，用對(duì)象冒充繼承構(gòu)造函數(shù)的屬性，用原型鏈繼承prototype對(duì)象的方法。用這兩種方式重寫前面的例子，代碼如下：

function A(Color) { 
 this.color = Color; 
}; 
A.prototype.showColor = function () { 
 return this.color; 
}; 
function B(Color, Name) { 
 A.call(this, Color);//對(duì)象冒充 
 this.name = Name; 
}; 
B.prototype = new A();//使用原型鏈繼承 
B.prototype.showName = function () { 
 return this.name; 
}; 
var a = new A("blue"); 
var b = new B("red", "John"); 
document.write(a.showColor());//輸出：blue 
document.write(b.showColor());//輸出：red 
document.write(b.showName());//輸出：John 

       繼承的方式和創(chuàng)建對(duì)象的方式有一定的聯(lián)系，推薦使用的繼承方式還時(shí)原型鏈和對(duì)象冒充的混合方式。使用這種混合方式可以避免一些不必要的問題。
       看這篇文章的時(shí)候，必須看一下前面的創(chuàng)建對(duì)象的方式：詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象（1）和詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象（2）。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

最新評(píng)論