Javascript Erbe

Question

Ich bin im Moment ein paar verschiedenen Ansätze zur Javascript Erbe versuchen. Ich habe den folgenden Code:

('ausgeliehen' von 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); 

Nun, wenn ich eine Instanz von StreetGridView schaffen, kann ich getOwnerElement() aufrufen, auf das kein Problem. Alles funktioniert wie erwartet.

JEDOCH

Wenn ich eine andere Instanz zu erstellen, werden alle zu Beispiel 2 vorgenommenen Änderungen zurück in Beispiel 1

Ich weiß, das ist das Hauptproblem bei der Verwendung von Prototypen als Anteil Instanz Informationen wider. Ich habe mir heute Morgen den Kopf zerbrochen, aber ich habe mich gefragt, ob da draußen jemand ist, der mich in die richtige Richtung weisen könnte!

Danke

Answer 1

Inspiration schlägt!

ich nicht, dass die Muster auf Arbeit bekommen konnte, so lassen Sie es mich wissen, wenn Sie erkennen können, was mit ihm nicht stimmt. Aber Dinge zu bewegen und Kombinationsvererbung zu benutzen, scheint das Problem gelöst zu haben.

Ich habe den folgenden Code enthalten und verließ diesen Beitrag auf dem Forum andere in Zukunft zu helfen.

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

Siehe here und here für info :)
auch ein Framework wie Prototype oder Dojo verwenden.
Sie machen das Leben viel einfacher.

Answer 3

the_drow:

Ich habe einen Kommentar oben über den Super-Konstruktor zweimal mit Ihrer Lösung aufrufen - aber ein bisschen schlecht fühlen Sie über die Umsetzung der inheritPrototype hängen bleibt. Zunächst einmal Kredit Nicholas Zakas wie dies paraphrasieren mir sein Buch Professional JavaScript für Web-Entwickler, 2. Auflage (Seite 181):

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

Jetzt ist Ihre ersetzen:

StreetGridView.prototype = new GridView(); 

mit,

StreetGridView.prototype = inheritPrototype(StreetGridView,GridView); 

und Sie haben nur Ihre Gridview-Konstruktor einmal aufgerufen! Aber Sie werden die Objektmethode bemerken. Sie benötigen etwas wie:

Wenn Sie Douglas Crockford gelesen haben, haben Sie dieses gesehen!

Shameless Stecker:Dieses Zeug sind schwer zu grok und sind der genaue Grund, warum ich einen Aufsatz über TDD JavaScript machte und den ganzen zweiten Teil Muster eine Reihe von Unit-Tests der Vererbung. Ich untersuche speziell die Zakas und Crockford Bücher über die Erstellung und Vererbung von Objekten. Sie müssen meinen Aufsatz nicht lesen (er ist derzeit im Open Office .odt-Format), aber Sie könnten viel Schlimmeres tun, als einfach meinen Code herunterzuladen und ihn in 2 Minuten zu lesen!Hier ist der Link: My Free Book