2016-09-11 1 views
1

irgendwie JS Vererbung nicht in meinem Kopf bekommen. Ich habe jetzt einige Dinge ausprobiert, und aus irgendeinem Grund kann ich einem Objekt, das erbt, keine Methode hinzufügen.Vererbung in Javascript Aufruffunktionen

Siehe meinen Versuch, B.setC zu definieren, die dann später irgendwie nicht verfügbar ist. Irgendwelche Hinweise?

prost Tom

A = function(value){ 
     this.aValue = value; 
} 


B = function(value){ 
    A.call(this, value); 
    this.bValue=value+value; 
} 

B.prototype = Object.create(A.prototype);//subclass extends superclass 


B.setC = function(value){ 
    this.c = value+value+value; 
    console.log("execution"); 
} 

B.prototype.setD = function(value){ 
    this.D = value+value+value+value; 
    console.log("execution"); 
} 





x = new B("ConstructorParam"); 
x.setC("methodParam");// gives that setC is not a function 
x.setD("methodParam");// works but I added setD to A not B 
+3

Es ist nur ein Tippfehler, Sie bedeutete 'B.prototype.setC = ...', aber Sie haben 'B.setC = ... ' –

+0

Eigentlich ist es kein Tippfehler. Ich möchte setC zu B not A hinzufügen und wenn mein Verständnis stimmt und zu dem, was ich in Chrome debuggen sah, ist es, wenn ich B.prototype.setB verwende, dann füge ich setB dem Prototyp von B aka A und nicht B hinzu. Oder vermisse ich etwas? – Tom

+0

Ihr Code fällt auch Opfer von [* The Horror of Implicit Globals *] (http://blog.niftysnippets.org/2008/03/horror-of-implicit-globals.html) * (das ist ein Beitrag in meinem Blog) *: Deklariere deine Variablen. –

Antwort

3

Die Verwirrung scheint von diesem Missverständnis zu kommen; Zitieren Sie Ihren Kommentar:

Eigentlich ist es kein Tippfehler. Ich möchte setC zu B not A hinzufügen und wenn mein Verständnis stimmt und zu dem, was ich in Chrome debuggen sah, ist es, wenn ich B.prototype.setB verwende, dann füge ich setB dem Prototyp von B aka A und nicht B hinzu. Oder vermisse ich etwas?

die auch von diesem Kommentar in der Frage angezeigt wird:

x.setD("methodParam");// works but I added setD to A not B 

B.prototype ist nicht A. B.prototype ist ein Objekt, das A.prototype als seinen Prototyp hat. Sie haben setD korrekt zu B.prototype hinzugefügt; Es wird in keiner Weise zu A oder A.prototype hinzugefügt.

Wenn Sie setC und setD die Art und Weise verwenden möchten Sie zeigten, würden Sie sie setzen entweder auf B.prototype (so sind sie zugänglich für Instanzen B) oder auf A.prototype (so dass sie auf die Fälle von A oder B zugänglich sind) .

Wenn wir B.setC =-B.prototype.setC = ändern, d Kleinschreibung machen c anzupassen, fügen Sie einige fehlende var s und kürzere Werte verwenden, wenn die Erstellung und die Methoden aufrufen, bekommen wir diese:

var A = function(value){ 
    this.aValue = value; 
}; 

var B = function(value){ 
    A.call(this, value); 
    this.bValue = value + value; 
}; 

B.prototype = Object.create(A.prototype);//subclass extends superclass 

B.setC = function(value){ 
    this.c = value + value + value; 
    console.log("execution"); 
}; 

B.prototype.setD = function(value){ 
    this.d = value + value + value + value; 
    console.log("execution"); 
}; 

var x = new B("b"); 
x.setC("c"); 
x.setD("d"); 

Kurz nach dem letzte Zeile des Codes, ist es das, was wir im Speicher (minus ein paar unnötigen Details) haben:

 
     +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+ 
     |                | 
     \ +−−−−−−−−−−−−−−−+            | 
A−−−−−−−−−>| function |            | 
      +−−−−−−−−−−−−−−−+        +−−−−−−−−−−−−−+ | 
      | prototype  |−−−−−−−−−−−−−−−−−−−−−−−−−−−−>| object | |  
      +−−−−−−−−−−−−−−−+       /+−−−−−−−−−−−−−+ |  
                 | | constructor |−+ 
                 | +−−−−−−−−−−−−−+ 
     +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+ | 
     |           | | 
     \ +−−−−−−−−−−−−−−−+       | | 
B−−−−−−−−−>| function |       | | 
      +−−−−−−−−−−−−−−−+ +−−−−−−−−−−−−−−−−−−+ | | 
      | prototype  |−−−>|  object  | | | 
      +−−−−−−−−−−−−−−−+/+−−−−−−−−−−−−−−−−−−+ | | 
           | | constructor  |−+ | 
           | | setC: (function) | | 
           | | setD: (function) | | 
           | | [[Prototype]] |−−−+ 
      +−−−−−−−−−−−−−−−+ | +−−−−−−−−−−−−−−−−−−+ 
x−−−−−−−−−>| object  | | 
      +−−−−−−−−−−−−−−−+ | 
      | aValue: "a" | | 
      | bValue: "aa" | | 
      | c: "ccc"  | | 
      | d: "dddd"  | | 
      | [[Prototype]] |−−+ 
      +−−−−−−−−−−−−−−−+ 

[[Prototype]] oben ist der Name der Spezifikation für th verwendet e "Interner Slot" eines Objekts, das seinen Verweis auf sein Prototypobjekt enthält. Im Gegensatz dazu ist prototype die Eigenschaft für Funktionen (z. B. A.prototype) nur eine normale Eigenschaft von Funktionen, die auf das Objekt verweist, das new als das [[Prototype]] des neuen Objekts verwendet, das es erstellt, wenn Sie diese Funktion mit new verwenden.


Nur der Vollständigkeit halber hier die in ES2015 ist +:

class A { 
    constructor(value) { 
     this.aValue = value; 
    } 
} 

class B extends A { 
    constructor(value) { 
     super(value); 
     this.bValue = value + value; 
    } 

    setC(value) { 
     this.c = value + value + value; 
     console.log("execution"); 
    } 

    setD(value) { 
     this.d = value + value + value + value; 
     console.log("execution"); 
    } 
} 

let x = new B("b"); 
x.setC("c"); 
x.setD("d");