說(shuō)明：本文為《JavaScript高級(jí)程序設(shè)計(jì)》第4章學(xué)習(xí)筆記。

一．             繼承機(jī)制實(shí)例

幾何形狀只有兩種，即橢圓形和多變形。圓是橢圓形的一種，它只有一個(gè)焦點(diǎn)。三角形、矩形和五邊形都是多邊形的一種，具有不同數(shù)量的邊。正方形是矩形的一種，所有的邊等長(zhǎng)。這就構(gòu)成了繼承關(guān)系。

形狀是橢圓形和多邊形的基類。圓形繼承了橢圓形，因此圓形是橢圓形的子類，橢圓形是圓形的超類。

二．             繼承機(jī)制的實(shí)現(xiàn)

要用ECMAScript實(shí)現(xiàn)繼承機(jī)制，首先從基類入手。所有開(kāi)發(fā)者定義的類都可以作為基類。出于安全原因，本地類和宿主類不能作為基類，這樣可以防止編譯過(guò)的瀏覽器級(jí)的代碼，因?yàn)檫@些代碼可以被用于惡意攻擊。

選定基類后，就可以創(chuàng)建它的子類了。是否使用基類完全由你決定。有時(shí)，你可能想創(chuàng)建不能直接使用的基類，它只是用戶給予類公共通用的函數(shù)。在這種情況下，基類被看作抽象類。

1．繼承的方式

JavaScript中的繼承機(jī)制并不是明確規(guī)定的，而是通過(guò)模仿實(shí)現(xiàn)的。開(kāi)發(fā)者可以自己決定最適用的繼承方式。

1）對(duì)象冒充

原理：構(gòu)造函數(shù)使用this關(guān)鍵字給所有屬性和方法賦值。因?yàn)闃?gòu)造函數(shù)只是一個(gè)函數(shù)，所以可使ClassA的構(gòu)造函數(shù)成為ClassB的方法，然后調(diào)用它。ClassB就會(huì)收到ClassA的構(gòu)造函數(shù)定義的屬性方法。

Eg. 

function ClassA(sColor) {
         this.color = sColor;
         this.sayColor = function() {
       alert(this.color);
}
}

function ClassB(sColor, sName) {
         this.newMethod = ClassA;
         this.newMethod(sColor);
         delete this.newMethod;
         this.name = sName;
         this.sayName = function() {
       alert(this.name);
}     
}

2）call()方法

call()方法是與經(jīng)典的對(duì)象冒充方法最相似的方法。它的第一個(gè)參數(shù)用作this的對(duì)象，其他參數(shù)都直接傳遞給函數(shù)本身。

Eg. 可將上例中的ClassB改成如下后，可達(dá)到先前同樣的效果： 

function ClassB(sColor, sName) {
        ClassA.call(this, sColor);
 this.name = sName;
 this.sayName = function() {
alert(this.name);
}
}

3）apply()方法

該方法有兩個(gè)參數(shù)，用作this的對(duì)象要傳遞給的參數(shù)的數(shù)組。

Eg.

function sayColor(sPrefix, sSuffix) {
          alert(sPrefix + this.color + sSuffix);
};
var obj = new Object();
obj.color = "red";
sayColor.apply(obj, new Array("The color is ", ", a very nice color indeed."));

可將上述的ClassB修改為如下這樣：

function ClassB(sColor, sName) {
       ClassA.apply(this, new Array(sColor));
       this.name = sName;
       this.sayName = function() {
       alert(this.name);
};
}

4）原型鏈

Prototype對(duì)象是個(gè)模板，要實(shí)例化的對(duì)象都以這個(gè)模板為基礎(chǔ)。總而言之，prototype對(duì)象的任何屬性和方法都被傳遞給那個(gè)類的所有實(shí)例。原型鏈利用這種功能來(lái)實(shí)現(xiàn)繼承機(jī)制。

Eg.

function ClassA() {
}

ClassA.prototype.color = "red";

ClassA.prototype.sayColor = function() {
         alert(this.color);
};

function ClassB() {
}

ClassB.prototype = new ClassA();
ClassB.prototype.name = "";
ClassB.prototype.sayName = function() {
         alert(this.name);
};

原型鏈的弊端是不支持多重繼承。記住，原型鏈會(huì)用另一類型的對(duì)象重寫(xiě)類的prototype屬性。

5）混合模式

對(duì)象冒充的主要問(wèn)題是必須使用構(gòu)造函數(shù)的方式，這不是最好的選擇。不過(guò)如果使用原型鏈，就無(wú)需使用構(gòu)造函數(shù)了。如果將這兩種方式混合起來(lái)，將會(huì)達(dá)到更好的效果。

Eg.

 fuction ClassA(sColor) {
    this.color = sColor;
}

ClassA.prototype.sayColor = function() {
    alert(this.color);
};

function ClassB(sColor, sName) {
    ClassA.call(this, sColor);
    this.name = sName;
}

ClassB.prototype = function() {
    alert(this.name);
};

  調(diào)用代碼如下所示：

var objA = new ClassA("red");
var objB = new ClassB("blue", "AmigoXie");
objA.sayColor();
objB.sayColor();
objB.sayName();

2．一個(gè)更實(shí)際的例子

下面講一個(gè)Polygon、Triangle和Rectangle的例子。

1）創(chuàng)建基類Polygon

Eg. 

 function Polygon(iSides) {
         this.sides = iSides;
}

Polygon.prototype.getArea = function() {
        return 0;
};

2）創(chuàng)建子類

三角形Triangle的內(nèi)容如下：

function Triangle(iBase, iHeight) {
        Polygon.call(this, 3);
        this.base = iBase;
        this.height = iHeight;
}

Triangle.prototype = new Polygon();
Triangle.prototype.getArea = function() {
        return 0.5 * this.base * this.height;
};

Rectangle的ECMAScript代碼如下：

function Rectangle(iLength; iWidth) {
        Polygon.call(this, 4);
        this.length = iLength;
        this.width = iWidth;
}

Rectangle.prototype = new Polygon();
Rectangle.prototype = function() {
        return this.length * this.width;
};

3）測(cè)試代碼 

var triangle = new Triangle(12, 4);
var rectangle = new Rectangle(22, 10);
alert(triangle.sides);
alert(triangle.getArea());
alert(rectangle.sides);
alert(rectangle.getArea());

4）采用動(dòng)態(tài)原型方法如何？

function Polygon(iSides) {
        this.sides = iSides;
        if (typeof Polygon._initialized == "undefined") {
       Polygon.prototype.getArea = function() {
       return 0;
};

Polygon._initialized = true;
}
}

function Triangle(iBase, iHeight) {
        Polygon.call(this, 3);
        this.base = iBase;
        this.height = iHeight;
        if (typeof Triangle._initialized == "undefined") {
       Triangle.prototype = new Polygon();
       Triangle.prototype.getArea = function() {
       return 0.5 * this.base * this.height;
};

Triangle. _initialized = true;
}
}

Triangle.prototype = new Polygon();

三．             小結(jié)

本章介紹了ECMAScript中用對(duì)象冒充和原型鏈實(shí)現(xiàn)的繼承概念。學(xué)會(huì)結(jié)合使用這些方式才是建立類之間的繼承機(jī)制的最好方式。