Javascript 的類別繼承

2010-06-10

4430
0

Javascript不是一種要嚴謹的OO語言,但他也可以實作繼承,網路上有好幾種方法,我只選了一種最接近真正OO的,以Google Api裡的GMarker做例子.

要使用Third Party的javascript framework時,遇到功能不足,就會想用繼承來解決.這裡舉的例子是幫Google Api的GMarker加上一個Id,方便介面跟後端的service互動,這樣後端才有辦法知道是那一個GMarker被Click了.

function GMonitor(latlng, options) {
    this.latlng = latlng;
    this.id = options.id;
    GMarker.apply(this, arguments);
}

GMonitor.prototype = new GMarker(new GLatLng(0, 0));
GMonitor.prototype.constructor = GMarker.prototype.constructor;
GMonitor.prototype.id = null;
GMonitor.prototype.setGuid = function(id) { this.id = id; }
GMonitor.prototype.getGuid = function() { return this.id; }

程式碼還蠻短的.但不知道的話就沒有辦法做繼承,因為javascript在VS2008還沒有intellisense.

首先看下面prototype的部份,就是實作繼承.第一行說明GMonitor是繼承GMarker類別.第二行是GMonitor的constructor會使用GMarker的constructor,這個部份邏輯有點亂,我也不知道怎麼解釋.下面三行就是替GMonitor加入新的id成員及其存取方法.

那麼上面的程式碼是做甚麼的呢?其實就是GMonitor的constructor實作,javascript繼承麻煩的是我想要保留GMarker的constructor功能,但又要加入部份自己的程式,先把自己要做的初始化做完,再來呼叫父類別的constructor,就是最後一行.

GMarker.apply(this,arguments);

那個arguments就是其他有可能丟進去GMarker constructor的參數,因為javascript其實是沒有method overloading的.沒有傳遞的參數就會變成null,所以也不確定到底有幾個會傳遞進來.基本上甚麼都不要改,因為這是ECMA Script的定義,

My WP Blog with english technical docs.

回首頁