JavaScript überschreibt Methoden

Lassen Sie uns sagen, Sie haben den folgenden code:

function A() {
    function modify(){
       x = 300;
       y = 400;
    }
    var c = new C();
}

function B() {
    function modify(){
       x = 3000;
       y = 4000;
    }
    var c = new C();
}


C = function () {
   var x = 10;
   var y = 20;

   function modify() {
      x = 30;
      y = 40;
   };

   modify();
   alert("The sum is: " + (x+y));
}

Die Frage ist nun, ob es irgendeinen Weg gibt, da kann ich das überschreiben der Methode modify von C mit den Methoden die in A und B. In Java verwenden Sie das Schlüsselwort super, aber wie kann man etwas erreichen, wie dies in JavaScript?

InformationsquelleAutor der Frage Daniel Nastase | 2011-07-30

116

Edit: Es ist jetzt sechs Jahre her, dass die ursprüngliche Antwort wurde geschrieben und es hat sich viel verändert!
- Wenn Sie eine neuere version von JavaScript, möglicherweise kompiliert mit einem tool wie Babelkönnen Sie der Einsatz von real-Klassen.
- Wenn Sie mit der Klasse Komponente Konstruktoren zur Verfügung gestellt von Kantig oder ReagierenSie werden wollen, suchen Sie in der Dokumentation für das framework.
- Wenn Sie mit ES5 und "fake" - Klassen von hand mit Prototypen, die Antwort unten ist noch richtig, wie es immer war.
Glück!

JavaScript Vererbung sieht ein bisschen anders aus als in Java. Hier ist, wie die nativen JavaScript-object system aussieht:
```
//Create a class
function Vehicle(color){
  this.color = color;
}

//Add an instance method
Vehicle.prototype.go = function(){
  return "Underway in " + this.color;
}

//Add a second class
function Car(color){
  this.color = color;
}

//And declare it is a subclass of the first
Car.prototype = new Vehicle();

//Override the instance method
Car.prototype.go = function(){
  return Vehicle.prototype.go.call(this) + " car"
}

//Create some instances and see the overridden behavior.
var v = new Vehicle("blue");
v.go() //"Underway in blue"

var c = new Car("red");
c.go() //"Underway in red car"
```
Dies ist leider ein bisschen hässlich und es nicht über eine sehr nette Art und Weise zu "super": Sie müssen manuell festlegen, welche übergeordneten Klassen " - Methode, die Sie anrufen möchten. Als Ergebnis gibt es eine Vielzahl von tools, um das erstellen von Klassen schöner. Versuchen Sie bei Prototype.js, Backbone.js oder eine ähnliche Bibliothek, enthält eine schönere syntax, die das tun, OOP in js.

InformationsquelleAutor der Antwort Adam
21

Da dies ein top-Treffer auf Google, möchte ich eine aktualisierte Antwort.

Mit ES6-Klassen macht der Vererbung und zwingende Methode viel einfacher:
```
'use strict';

class A {
    speak() {
        console.log("I'm A");
    }
}

class B extends A {
    speak() {
        super.speak();

        console.log("I'm B");
    }
}

var a = new A();
a.speak();
//Output:
//I'm A

var b = new B();
b.speak();
//Output:
//I'm A
//I'm B
```
Den super - Schlüsselwort bezieht sich auf die übergeordnete Klasse, wenn in der erbenden Klasse. Außerdem alle Methoden der Elternklasse sind gebunden an die Instanz des Kindes, so dass Sie nicht haben, um zu schreiben super.method.apply(this);.

Als für die Kompatibilität: das ES6 Kompatibilitäts-Tabelle zeigt nur die neuesten Versionen der wichtigsten Spieler-support-Klassen (meistens). V8-Browser haben Sie seit Januar dieses Jahres (Chrome und Opera) und Firefox, mit der SpiderMonkey JS-engine, sehen Klassen im nächsten Monat mit Ihrer offiziellen Firefox-45 release. Auf der mobilen Seite mit Android noch nicht unterstützt diese Funktion, während iOS 9, release fünf Monaten, hat teilweise Unterstützung.

Glücklicherweise gibt es Babeleine JS-Bibliothek für re-kompilieren Harmonie-code in ES5-code. Klassen, und viele andere Coole features, die in ES6 können Sie Ihre Javascript-code sehr viel besser lesbar und wartbar.

InformationsquelleAutor der Antwort Yotam Ofek

Einmal vermeiden sollte, die die Emulation der klassischen OO und Nutzung der prototypischen OO statt. Ein schönes Tool-Bibliothek für prototypische OO ist Merkmale.

Dann eher das überschreiben von Methoden und einrichten der Vererbung Ketten (man sollte immer zugunsten Objekt Zusammensetzung über Objekt-Vererbung) Sie sollten Bündelung wiederverwendbare Funktionen in Eigenschaften und Herstellung von Gegenständen mit denen.

Live-Beispiel

var modifyA = {
    modify: function() {
        this.x = 300;
        this.y = 400;
    }
};

var modifyB = {
    modify: function() {
        this.x = 3000;
        this.y = 4000;
    }
};

C = function(trait) {
    var o = Object.create(Object.prototype, Trait(trait));

    o.modify();
    console.log("sum : " + (o.x + o.y));

    return o;
}

//C(modifyA);
C(modifyB);

InformationsquelleAutor der Antwort Raynos

3

ändern() in deinem Beispiel ist eine private Funktion, die nicht von überall zugänglich, aber in Ihrer A -, B-oder C-definition. Sie müssten erklären, wie
```
this.modify = function(){}
```
C hat keinen Bezug zu seinen Eltern, es sei denn, Sie übergeben es an C. Wenn C ist so eingerichtet, dass Erben von A oder B, es Erben die öffentlichen Methoden (nicht privaten Funktionen, wie Sie ändern() definiert). Sobald C erbt Methoden von übergeordneten, können Sie überschreiben die ererbten Methoden.

InformationsquelleAutor der Antwort Alex Heyd

die Methode modify()die Sie aufgerufen haben, in der letzten heißt im globalen Kontext
wenn Sie überschreiben möchten modify() müssen Sie zunächst Erben A oder B.

Vielleicht sind Sie versucht, dies zu tun:

In diesem Fall C erbt A

function A() {
    this.modify = function() {
        alert("in A");
    }
}

function B() {
    this.modify = function() {
        alert("in B");
    }
}

C = function() {
    this.modify = function() {
        alert("in C");
    };

    C.prototype.modify(); //you can call this method where you need to call modify of the parent class
}

C.prototype = new A();

InformationsquelleAutor der Antwort lovesh

1

Nicht, es sei denn, Sie machen alle Variablen mit "public", D. H. Mitglieder des Function entweder direkt oder über die prototype Eigenschaft.
```
var C = function( ) {
    this.x = 10 , this.y = 20 ;
    this.modify = function( ) {
        this.x = 30 , this.y = 40 ;
        console.log("(!) C >> " + (this.x + this.y) ) ;
    } ;
} ;

var A = function( ) {
    this.modify = function( ) {
       this.x = 300 , this.y = 400 ;
       console.log("(!) A >> " + (this.x + this.y) ) ;
    } ;
} ;
    A.prototype = new C ;

var B = function( ) {
    this.modify = function( ) {
       this.x = 3000 , this.y = 4000 ;
       console.log("(!) B >> " + (this.x + this.y) ) ;
    } ;
} ;


new C( ).modify( ) ;
new A( ).modify( ) ;
new B( ).modify( ) ; 
```
- testen Sie es hier
Werden Sie feststellen, ein paar änderungen.

Allem der Aufruf an die vermeintlichen "super-Klassen" Konstruktor wird nun implizit in dieser Zeile:
```
<name>.prototype = new C ;
```
Beide A und B jetzt individuell modifizierbaren Mitglieder x und y das wäre nicht der Fall, wenn wir geschrieben haben ... = C statt.

Dann xy und modify sind alle "public" - Mitglieder, so dass die Zuweisung einer anderen Function Ihnen
```
 <name>.prototype.modify = function( ) { /* ... */}
```
"überschreibt" die ursprüngliche Function mit diesem Namen.

Schließlich der Aufruf modify kann nicht getan werden in der Function Erklärung, weil der implizite Aufruf zum "super-Klasse" würde dann erneut ausgeführt werden, wenn wir uns die vermeintliche "super-Klasse" auf den prototype Eigenschaft der vermeintlichen "sub-Klassen".

Aber gut, das ist mehr oder weniger, wie Sie tun würde, diese Art der Sache, in JavaScript.

HTH,

FK

InformationsquelleAutor der Antwort FK82

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.