Javascript繼承

Question

我正在嘗試幾種不同的方法來Javascript的繼承此刻。我有以下代碼：

（從http://www.kevlindev.com/tutorials/javascript/inheritance/index.htm '借'）

KV = {}; 

KV.extend = function(subClass, baseClass) { 
     function inheritance() {} 
     inheritance.prototype = baseClass.prototype; 

     subClass.prototype = new inheritance(); 
     subClass.prototype.constructor = subClass; 
     subClass.baseConstructor = baseClass; 
     subClass.superClass = baseClass.prototype; 
    } 

function GridView() { 
     var _ownerElement; 
    } 

    GridView.prototype.getOwnerElement = function() { 

     return this._ownerElement; 
    } 

    GridView.prototype.setOwnerElement = function(ownerElement) { 
     this._ownerElement = ownerElement; 
    } 

    GridView.prototype.initialize = function() { 
     this.setOwnerElement('test'); 
    } 


function StreetGridView(dataURL, ownerElement) { 
     StreetGridView.baseConstructor.call(this); 

     StreetGridView.superClass.initialize(); 

     StreetGridView.superClass.setOwnerElement(ownerElement); 


} 

// subclass StreetGridView 
KV.extend(StreetGridView, GridView); 

現在，當我創建StreetGridView的一個實例，我可以調用它getOwnerElement（）沒有問題。一切都按預期工作。

無論其

當我創建另一個實例，到實例2所做的任何更改都反映回實例1

我知道這是用原型作爲共享實例信息的主要問題。今天早上我一直在絞盡腦汁，但是想知道是否有人能夠指引我走向正確的方向！

謝謝

Answer 1

靈感罷工！

我無法獲得該模式的工作，所以請讓我知道，如果你能發現它有什麼問題。但移動的東西，並使用組合繼承，我似乎已經解決了這個問題。

我已將下面的代碼添加到論壇中，以便將來幫助他人。

function GridView() { 
     var _ownerElement; 
    } 

    GridView.prototype.getOwnerElement = function() { 

     return this._ownerElement; 
    } 

    GridView.prototype.setOwnerElement = function(ownerElement) { 
     this._ownerElement = ownerElement; 
    } 

    GridView.prototype.initialize = function() { 
     this.setOwnerElement('test'); 
    } 

    function StreetGridView() { 

     GridView.call(this); 
    } 

    StreetGridView.prototype = new GridView(); 

    StreetGridView.prototype.initialize = function(dataURL, ownerElement) { 

     this.setOwnerElement(ownerElement); 


     /* Constructor Code */ 

     $(this.getOwnerElement()).flexigrid 
      (
       { 
        url: dataURL, 
        dataType: 'json', 
        colModel: [ 
        { display: '', name: 'view', width: 20, sortable: true, align: 'center' }, 
        { display: 'USRN', name: 'USRN', width: 80, sortable: true, align: 'center' }, 
        { display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' }, 
        { display: 'Locality', name: 'Locality', width: 200, sortable: true, align: 'left' }, 
        { display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' }, 
        { display: 'Open', name: 'Actions', width: 30, sortable: false, align: 'center' } 
        ], 
        sortname: "USRN", 
        sortorder: "asc", 
        usepager: true, 
        title: 'Streets', 
        useRp: true, 
        rp: 5, 
        showToggleBtn: false, 
        width: 'auto', 
        height: 'auto' 
       } 
      ); 
    } 

Answer 2

見here和here的信息:)
還可以使用像原型或道場的框架。
他們讓生活變得更容易。

Answer 3

the_drow：

我留下評論上述有關與您的解決方案調用超級構造的兩倍 - 但感覺有點不好讓你掛在inheritPrototype的實施。首先，信貸尼古拉斯Zakas，因爲這是我轉述他的書專業的JavaScript的Web開發者，第二版（第181頁）：

function inheritPrototype(sub,sup) { 
    var proto = object(sup.prototype);// you'll need an object create method ;) 
    proto.constructor = sub; 
    sub.prototype = proto; 
} 

現在您的更換：

StreetGridView.prototype = new GridView(); 

用，

StreetGridView.prototype = inheritPrototype(StreetGridView,GridView); 

而且您只調用過一次GridView構造函數！但是你會注意到對象的方法。你需要這樣的東西：

function object(o) { 
    function F(){}; 
    F.prototype = o; 
    return new F(); 
} 

如果你已經讀過道格拉斯克羅克福德你已經看過這個！

無恥插頭：這東西是很難神交，是確切的原因，我正在做的事情TDD JavaScript和整個第二部分的文章有一堆的遺傳模式的單元測試。我正在專門研究關於對象創建和繼承的Zakas和Crockford書籍。您不必閱讀我的論文（它目前使用Open Office .odt格式），但是您可能會比僅僅下載我的代碼並在2分鐘內閱讀它更糟糕！這裏的鏈接： My Free Book