Mehrfache Vererbung/Prototypen in JavaScript

Mehrfache Vererbung kann erreicht werden in ECMAScript 6 durch die Verwendung Proxy-Objekte.

Implementierung

function getDesc (obj, prop) {
  var desc = Object.getOwnPropertyDescriptor(obj, prop);
  return desc || (obj=Object.getPrototypeOf(obj) ? getDesc(obj, prop) : void 0);
}
function multiInherit (...protos) {
  return Object.create(new Proxy(Object.create(null), {
    has: (target, prop) => protos.some(obj => prop in obj),
    get (target, prop, receiver) {
      var obj = protos.find(obj => prop in obj);
      return obj ? Reflect.get(obj, prop, receiver) : void 0;
    },
    set (target, prop, value, receiver) {
      var obj = protos.find(obj => prop in obj);
      return Reflect.set(obj || Object.create(null), prop, value, receiver);
    },
    *enumerate (target) { yield* this.ownKeys(target); },
    ownKeys(target) {
      var hash = Object.create(null);
      for(var obj of protos) for(var p in obj) if(!hash[p]) hash[p] = true;
      return Object.getOwnPropertyNames(hash);
    },
    getOwnPropertyDescriptor(target, prop) {
      var obj = protos.find(obj => prop in obj);
      var desc = obj ? getDesc(obj, prop) : void 0;
      if(desc) desc.configurable = true;
      return desc;
    },
    preventExtensions: (target) => false,
    defineProperty: (target, prop, desc) => false,
  }));
}

Erklärung

Ein proxy-Objekt besteht aus einem Zielobjekt und einige fallen, die definieren, benutzerdefinierte Verhalten für grundlegende Operationen.

Beim erstellen ein Objekt erbt von einem anderen, verwenden wir Object.create(obj). Aber in diesem Fall wollen wir die mehrfache Vererbung, also statt obj ich benutze einen proxy, redirect grundlegende Operationen auf das entsprechende Objekt.

Ich benutze diese fallen:

• Die - Falle ist eine Falle für die in - operator. Ich benutze zu überprüfen, wenn mindestens ein Prototyp enthält die Eigenschaft.
• Die get - Falle ist eine Falle für die erste Immobilien-Werte. Ich benutze zu finden, der erste Prototyp enthält, die Eigenschaft, und ich geben den Wert zurück, oder rufen Sie die get-Methode an die entsprechenden Empfänger. Dies erfolgt durch Reflektieren.get. Wenn kein Prototyp enthält die Eigenschaft, die ich zurück undefined.
• Die set - Falle ist eine Falle für die Einstellung der Eigenschaft Werte. Ich benutze zu finden, der erste Prototyp enthält, die Eigenschaft, und ich nenne Ihren setter auf die entsprechenden Empfänger. Wenn es keine setter oder kein Prototyp enthält die Eigenschaft den Wert definiert ist, auf die entsprechenden Empfänger. Dies erfolgt durch Reflektieren.set.
• Die aufzählen - Falle ist eine Falle für for...in - Schleifen. Ich iterieren aufzählbare Eigenschaften aus dem ersten Prototyp, der dann von der zweiten, und so weiter. Sobald eine Eigenschaft wurde iteriert, Speichere ich es in einer hash-Tabelle zu vermeiden, Durchlaufen Sie erneut.
  
  Warnung: Diese Falle wurde entfernt ES7 Entwurf und veraltet ist, im Browser.
• Die ownKeys - Falle ist eine Falle für - Objekt.getOwnPropertyNames(). Da ES7, for...in Schleifen halten ruft [[GetPrototypeOf]] und die Eigenschaften von jedem. Also, um es Durchlaufen, werden die Eigenschaften der Prototypen, ich benutze diese Falle zu machen, alle aufzählbaren Eigenschaften geerbt erscheinen wie eigene Eigenschaften.
• Die getOwnPropertyDescriptor - Falle ist eine Falle für - Objekt.getOwnPropertyDescriptor(). Alle aufzählbaren Eigenschaften angezeigt, wie die eigenen Eigenschaften in der ownKeys Falle ist nicht genug, for...in Schleifen erhalten Sie den Deskriptor zu überprüfen, ob Sie Durchlaufen werden. Also ich benutze zu finden, der erste Prototyp enthält, die Eigenschaft, und ich Durchlaufen, seine prototypische Kette, bis ich den Eigentümer, und ich, wieder in seine Deskriptor. Wenn kein Prototyp enthält die Eigenschaft, die ich zurück undefined. Der Deskriptor wird geändert, um es konfigurierbar, sonst könnte es brechen einige proxy-Invarianten.
• Die preventExtensions und defineProperty fallen sind nur enthalten, um zu verhindern, dass diese Operationen ändern die proxy-Ziel. Sonst könnten wir am Ende brechen einige proxy-Invarianten.

Gibt es mehr fallen zur Verfügung, die ich nicht verwenden

• Die getPrototypeOf - Falle Hinzugefügt werden könnten, aber es gibt keinen richtigen Weg, um die Rückkehr der mehreren Prototypen. Dies impliziert instanceof wird nicht funktionieren weder. Daher lass ich es bekommen, dem Prototyp der Gegner, welche zunächst null ist.
• Die setPrototypeOf - Falle Hinzugefügt werden könnten und akzeptieren ein array von Objekten, die würde an die Stelle der Prototypen. Dies bleibt als übung für den Leser. Hier ich lass es einfach ändern Sie den Prototyp der Zielgruppe, die nicht sehr nützlich, weil keine Falle verwendet das Ziel.
• Die deleteProperty - Falle ist eine Falle für das löschen von eigenen Eigenschaften. Der proxy stellt die Vererbung, so würde dies nicht viel Sinn. Ich lasse Sie versuchen, das löschen auf dem Ziel, das sollte keine Eigenschaft besitzen, sowieso.
• Die isExtensible - Falle ist eine Falle für die Erweiterbarkeit. Nicht sehr nützlich, da eine invariante Kräfte, bis Sie wieder die gleiche Dehnbarkeit wie das Ziel. Also ich lass es einfach leiten den Betrieb, um das Ziel, die erweiterbar sein.
• Die apply und Konstrukt fallen sind fallen für den Aufruf oder instanziieren. Sie sind nur sinnvoll, wenn das Ziel ist, eine Funktion oder einen Konstruktor.

Beispiel

//Creating objects
var o1, o2, o3,
    obj = multiInherit(o1={a:1}, o2={b:2}, o3={a:3, b:3});

//Checking property existences
'a' in obj; //true   (inherited from o1)
'b' in obj; //true   (inherited from o2)
'c' in obj; //false  (not found)

//Setting properties
obj.c = 3;

//Reading properties
obj.a; //1           (inherited from o1)
obj.b; //2           (inherited from o2)
obj.c; //3           (own property)
obj.d; //undefined   (not found)

//The inheritance is "live"
obj.a; //1           (inherited from o1)
delete o1.a;
obj.a; //3           (inherited from o3)

//Property enumeration
for(var p in obj) p; //"c", "b", "a"

InformationsquelleAutor Oriol

Ich wie John Resig die Implementierung einer Klasse-Struktur: http://ejohn.org/blog/simple-javascript-inheritance/

Diese können einfach erweitert, um so etwas wie:

Class.extend = function(prop /*, prop, prop, prop */) {
    for( var i=1, l=arguments.length; i<l; i++ ){
        prop = $.extend( prop, arguments[i] );
    }

    //same code
}

denen Sie übergeben mehrere Objekte an die Erben. Sie gehen zu verlieren instanceOf Fähigkeit hier, aber das ist gegeben, wenn Sie möchten, die mehrfache Vererbung.

meine ziemlich verworrenes Beispiel oben ist erhältlich bei https://github.com/cwolves/Fetch/blob/master/support/plugins/klass/klass.js

Beachten Sie, dass es einige tote code in diese Datei, aber es erlaubt Mehrfachvererbung, wenn Sie möchten, um einen Blick zu nehmen.

Wenn Sie möchten, angekettet Vererbung (KEINE Mehrfachvererbung, aber für die meisten Menschen ist es das gleiche), es kann erreicht werden mit der Klasse wie:

var newClass = Class.extend( cls1 ).extend( cls2 ).extend( cls3 )

die Erhaltung der ursprünglichen Prototyp-Kette, aber Sie haben auch eine Menge von sinnlosen code laufen.

InformationsquelleAutor Mark Kahn

Nicht bekommen zu verwechseln mit dem JavaScript-framework-Implementierungen von mehrfach-Vererbung.

Alles, was Sie tun müssen, ist Objekt.create() ein neues Objekt erstellen jedes mal, wenn mit dem angegebenen Prototyp-Objekt und Eigenschaften, dann ändern Sie die Objekt.der Prototyp.Konstruktor jeden Schritt des Weges, wenn Sie planen, auf die Instanziierung B in die Zukunft.

Erben Instanz Eigenschaften thisA und thisB wir verwenden Funktion.der Prototyp.call() am Ende jeder Objekt-Funktion. Dies ist optional, wenn Sie nur die Sorge um Erben der Prototyp.

Führen Sie den folgenden code irgendwo und beobachten objC:

function A() {
  this.thisA = 4; //objC will contain this property
}

A.prototype.a = 2; //objC will contain this property

B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;

function B() {
  this.thisB = 55; //objC will contain this property

  A.call(this);
}

B.prototype.b = 3; //objC will contain this property

C.prototype = Object.create(B.prototype);
C.prototype.constructor = C;

function C() {
  this.thisC = 123; //objC will contain this property

  B.call(this);
}

C.prototype.c = 2; //objC will contain this property

var objC = new C();

• B erbt der Prototyp von A
• C erbt der Prototyp von B
• objC ist eine Instanz von C

Dies ist eine gute Erklärung der Schritte oben:

OOP In JavaScript: Was Sie Wissen MÜSSEN

InformationsquelleAutor Dave

Ist es möglich zu implementieren, die mehrfache Vererbung in JavaScript, aber nur sehr wenige Bibliotheken, die es tut.

Konnte ich zeigen Ring.js, das einzige Beispiel das ich kenne.

InformationsquelleAutor nicolas-van

Ich denke, es ist lächerlich einfach. Das Problem hier ist, dass das Kind die Klasse wird beziehen sich nur auf instanceof für die erste Klasse Sie nennen

https://jsfiddle.net/1033xzyt/19/

function Foo() {
  this.bar = 'bar';
  return this;
}
Foo.prototype.test = function(){return 1;}

function Bar() {
  this.bro = 'bro';
  return this;
}
Bar.prototype.test2 = function(){return 2;}

function Cool() {
  Foo.call(this);
  Bar.call(this);

  return this;
}

var combine = Object.create(Foo.prototype);
$.extend(combine, Object.create(Bar.prototype));

Cool.prototype = Object.create(combine);
Cool.prototype.constructor = Cool;

var cool = new Cool();

console.log(cool.test()); //1
console.log(cool.test2()); //2
console.log(cool.bro) //bro
console.log(cool.bar) //bar
console.log(cool instanceof Foo); //true
console.log(cool instanceof Bar); //false

InformationsquelleAutor BarryBones41

Hier ist ein Beispiel von Prototyp Verkettung mit Konstruktor-Funktionen:

function Lifeform () {             //1st Constructor function
    this.isLifeform = true;
}

function Animal () {               //2nd Constructor function
    this.isAnimal = true;
}
Animal.prototype = new Lifeform(); //Animal is a lifeform

function Mammal () {               //3rd Constructor function
    this.isMammal = true;
}
Mammal.prototype = new Animal();   //Mammal is an animal

function Cat (species) {           //4th Constructor function
    this.isCat = true;
    this.species = species
}
Cat.prototype = new Mammal();     //Cat is a mammal

Dieses Konzept verwendet Yehuda Katz-definition eines "Klasse" für JavaScript:

...ein JavaScript - "Klasse" ist nur ein Function-Objekt dient als Konstruktor plus eine angehängte Prototyp-Objekt. (Quelle: Guru Katz)

Im Gegensatz zu den Objekt.erstellen Konzept, wenn die Klassen sind so aufgebaut, und wir wollen Sie zum erstellen von Instanzen einer "Klasse", wir brauchen nicht zu wissen, was jeder "Klasse" erbt von. Wir verwenden nur new.

//Make an instance object of the Cat "Class"
var tiger = new Cat("tiger");

console.log(tiger.isCat, tiger.isMammal, tiger.isAnimal, tiger.isLifeform);
//Outputs: true true true true

Die Reihenfolge der precendence sollte Sinn machen. Zunächst sieht es in der Instanz-Objekt, dann ist es der Prototyp, dann der nächste Prototyp, etc.

//Let's say we have another instance, a special alien cat
var alienCat = new Cat("alien");
//We can define a property for the instance object and that will take 
//precendence over the value in the Mammal class (down the chain)
alienCat.isMammal = false;
//OR maybe all cats are mutated to be non-mammals
Cat.prototype.isMammal = false;
console.log(alienCat);

Wir können auch ändern, den Prototypen wird die Wirkung aller Objekte gebaut, die auf die Klasse.

//All cats are mutated to be non-mammals
Cat.prototype.isMammal = false;
console.log(tiger, alienCat);

Ursprünglich schrieb ich einige dieser mit diese Antwort.

InformationsquelleAutor Luke

Ich würde ds.oop. Seine ähnlich prototype.js und andere. macht mehrfache Vererbung sehr einfach, und seine minimalistisch. (nur 2 oder 3 kb) unterstützt Auch einige andere nette features wie Schnittstellen und dependency injection

/*** multiple inheritance example ***********************************/

var Runner = ds.class({
    run: function() { console.log('I am running...'); }
});

var Walker = ds.class({
    walk: function() { console.log('I am walking...'); }
});

var Person = ds.class({
    inherits: [Runner, Walker],
    eat: function() { console.log('I am eating...'); }
});

var person = new Person();

person.run();
person.walk();
person.eat();

InformationsquelleAutor dss