js類（繼承）（二）

標籤：class   color   c   http   strong   art   

1. 定義js類
js並不是一種面向對向的語言, 沒有提供對類的支援, 因此我們不能像在傳統的語言裡那樣 用class來定義類, 但我們可以利用js的閉包封裝機制來實現js類, 我們來封裝一個簡的Shape類.

代碼如下:

function ShapeBase() {
this.show = function()
{
alert("ShapeBase show");
};
this.init = function(){
alert("ShapeBase init");
};
}

這個類裡定義了兩個方法:show和init, 需要注意的是這裡用到了this來聲明, 而不是var, 因為用var是用來定義私人方法的.
另外, 我們還可以用prototype屬性來定義Shape的方法.

代碼如下:

ShapeBase.prototype={
show:function()
{
alert("ShapeBase show");
},
init:function() {
alert("ShapeBase init");
}
};

現在, 類是寫好了， 讓我們寫個js來測試下, 看看結果是不是跟我們想象的一樣呢?

代碼如下:

function test(src){
var s=new ShapeBase();
s.init();
s.show();
}

看到了吧, 其調用方式和C#一模一樣, 而結果也如我們所料.
到目前為止, 我們學會了如何建立js的類了, 但還只是執行個體方法，要是實現跟C#中的靜態方法要怎麼做呢？
其實, 實現js的靜態方法很簡單, 看下面如何?:

代碼如下:

//靜態方法
ShapeBase.StaticDraw = function()
{
alert("method draw is static");
}

2. 實現JS類抽象和繼承

一、 建構函式綁定

第一種方法：也是最簡單的方法，使用call或apply方法，將父物件的建構函式綁定在子物件上，即在子物件建構函式中加一行：

function Cat(name,color){

                 Animal.apply(this, arguments);

this.name = name;

this.color = color;

}

var cat1 = new Cat("大毛","黃色");

alert(cat1.species); // 動物

二、 prototype模式

第二種方法更常見，使用prototype屬性。

如果"貓"的prototype對象，指向一個Animal的執行個體，那麼所有"貓"的執行個體，就能繼承Animal了。

Cat.prototype = new Animal();

Cat.prototype.constructor = Cat;

var cat1 = new Cat("大毛","黃色");

alert(cat1.species); // 動物

代碼的第一行，我們將Cat的prototype對象指向一個Animal的執行個體。

Cat.prototype = new Animal();

它相當於完全刪除了prototype 對象原先的值，然後賦予一個新值。但是，第二行又是什麼意思呢？

Cat.prototype.constructor = Cat;

原來，任何一個prototype對象都有一個constructor屬性，指向它的建構函式。如果沒有"Cat.prototype = new Animal();"這一行，Cat.prototype.constructor是指向Cat的；加了這一行以後，Cat.prototype.constructor指向Animal。

alert(Cat.prototype.constructor == Animal); //true

更重要的是，每一個執行個體也有一個constructor屬性，預設調用prototype對象的constructor屬性。

alert(cat1.constructor == Cat.prototype.constructor); // true

因此，在運行"Cat.prototype = new Animal();"這一行之後，cat1.constructor也指向Animal！

alert(cat1.constructor == Animal); // true

這顯然會導致繼承鏈的紊亂（cat1明明是用建構函式Cat產生的），因此我們必須手動糾正，將Cat.prototype對象的constructor值改為Cat。這就是第二行的意思。

這是很重要的一點，編程時務必要遵守。下文都遵循這一點，即如果替換了prototype對象，

o.prototype = {};

那麼，下一步必然是為新的prototype對象加上constructor屬性，並將這個屬性指回原來的建構函式。

o.prototype.constructor = o;

 

可以參考：http://www.jb51.net/article/44875.htm