JavaScript-Überschreibungsmethoden

Angenommen, 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));
}

Nun ist die Frage, ob es eine Möglichkeit ist , in dem ich die Methode außer Kraft setzen kann modifyvon Cden Methoden, die in Aund B. In Java würden Sie das superSchlüsselwort -key verwenden, aber wie können Sie so etwas in JavaScript erreichen?

Bearbeiten: Es ist nun sechs Jahre her, dass die ursprüngliche Antwort geschrieben wurde und sich viel geändert hat!

• Wenn Sie eine neuere Version von JavaScript verwenden, die möglicherweise mit einem Tool wie Babel kompiliert wurde , können Sie echte Klassen verwenden .
• Wenn Sie die von Angular oder React bereitgestellten klassenähnlichen Komponentenkonstruktoren verwenden , sollten Sie in den Dokumenten nach diesem Framework suchen.
• Wenn Sie ES5 verwenden und mithilfe von Prototypen "gefälschte" Klassen von Hand erstellen, ist die Antwort unten immer noch so richtig wie nie zuvor.

Viel Glück!

Die JavaScript-Vererbung sieht etwas anders aus als Java. So sieht das native JavaScript-Objektsystem aus:

// 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"

Leider ist dies ein bisschen hässlich und beinhaltet keinen sehr guten Weg zu "super": Sie müssen manuell angeben, welche Methode der übergeordneten Klassen Sie aufrufen möchten. Infolgedessen gibt es eine Vielzahl von Werkzeugen, um das Erstellen von Klassen zu vereinfachen. Schauen Sie sich Prototype.js, Backbone.js oder eine ähnliche Bibliothek an, die eine schönere Syntax für OOP in js enthält.

Da dies ein Top-Hit bei Google ist, möchte ich eine aktualisierte Antwort geben.

Die Verwendung von ES6-Klassen erleichtert das Überschreiben von Vererbung und Methoden erheblich:

'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

Das superSchlüsselwort bezieht sich auf die übergeordnete Klasse, wenn es in der ererbenden Klasse verwendet wird. Außerdem sind alle Methoden in der übergeordneten Klasse an die Instanz des untergeordneten Elements gebunden, sodass Sie nicht schreiben müssen super.method.apply(this);.

In Bezug auf die Kompatibilität: In der ES6-Kompatibilitätstabelle werden (meistens) nur die neuesten Versionen der Support-Klassen der Hauptakteure angezeigt. V8-Browser haben sie seit Januar dieses Jahres (Chrome und Opera), und Firefox, das die SpiderMonkey JS-Engine verwendet, wird nächsten Monat Klassen mit ihrer offiziellen Firefox 45-Version sehen. Auf der mobilen Seite unterstützt Android diese Funktion immer noch nicht, während iOS 9, das vor fünf Monaten veröffentlicht wurde, teilweise unterstützt wird.

Glücklicherweise gibt es Babel , eine JS-Bibliothek zum erneuten Kompilieren von Harmony-Code in ES5-Code. Klassen und viele andere coole Funktionen in ES6 können Ihren Javascript-Code viel lesbarer und wartbarer machen.

Einmal sollte es vermieden werden, klassisches OO zu emulieren, und stattdessen prototypisches OO verwenden. Eine schöne Utility-Bibliothek für prototypische OO sind Merkmale .

Anstatt Methoden zu überschreiben und Vererbungsketten einzurichten (man sollte immer die Objektzusammensetzung der Objektvererbung vorziehen), sollten Sie wiederverwendbare Funktionen in Merkmalen bündeln und damit Objekte erstellen.

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);

modify () ist in Ihrem Beispiel eine private Funktion, auf die nur innerhalb Ihrer A-, B- oder C-Definition zugegriffen werden kann. Sie müssten es als deklarieren

this.modify = function(){}

C hat keinen Verweis auf seine Eltern, es sei denn, Sie übergeben es an C. Wenn C so eingerichtet ist, dass es von A oder B erbt, erbt es seine öffentlichen Methoden (nicht seine privaten Funktionen, wie Sie sie modifiziert haben ()). Sobald C Methoden von seinem übergeordneten Element erbt, können Sie die geerbten Methoden überschreiben.

Die Methode modify(), die Sie zuletzt aufgerufen haben, wird im globalen Kontext aufgerufen, wenn Sie überschreiben möchten, müssen modify()Sie zuerst Aoder erben B.

Vielleicht versuchen Sie das:

In diesem Fall CerbtA

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();

Nicht, wenn Sie nicht alle Variablen "öffentlich" machen, dh sie Functionentweder direkt oder über die prototypeEigenschaft zu Mitgliedern der machen .

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( ) ; 

• Teste es hier

Sie werden einige Änderungen bemerken.

Am wichtigsten ist, dass der Aufruf des vermeintlichen Konstruktors "Superklassen" jetzt in dieser Zeile impliziert ist:

<name>.prototype = new C ;

Beide Aund Bwerden nun individuell veränderbare Mitglieder haben xund ywas nicht der Fall wäre, wenn wir ... = Cstattdessen geschrieben hätten .

Dann x, yund modifyalle „öffentlichen“ Mitglieder , so dass eine andere Zuordnung von Functionihnen

 <name>.prototype.modify = function( ) { /* ... */ }

überschreibt das Original Functionmit diesem Namen.

Schließlich kann der Aufruf von modifyin der FunctionDeklaration nicht ausgeführt werden, da der implizite Aufruf der "Superklasse" dann erneut ausgeführt wird, wenn wir die vermeintliche "Oberklasse" auf die prototypeEigenschaft der angeblichen "Unterklassen" setzen.

Aber so würden Sie mehr oder weniger so etwas in JavaScript machen.

HTH,

FK