Einführung in verschiedene Vererbungskombinationen in JavaScript (Codebeispiele)-js-Tutorial-php.cn

Einführung in verschiedene Vererbungskombinationen in JavaScript (Codebeispiele)

不言

Freigeben： 2019-01-19 10:54:18

nach vorne

2368 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine Einführung in die Vererbung verschiedener Kombinationen in JavaScript. Ich hoffe, dass er Ihnen als Referenz dienen wird .

1. Kombinationsvererbung : Auch pseudoklassische Vererbung genannt, bezieht sich auf eine Vererbungsmethode, die Prototypenkette und geliehene Konstruktortechnologie kombiniert.

Schauen wir uns ein Beispiel an:

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  SuperType.prototype.sayName = function() {
    alert(this.name);
  }
  function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
  }
 
  //继承方法
  SubType.prototype = new SuperType();
  SubType.prototype.sayAge = function() {
    alert(this.age);
  }
 
  var instance1 = new SubType("Nicholas", 29);
  instance1.colors.push("black");
  alert(instance1.colors); //red,blue,green,black
  instance1.sayName(); //Nicholas
  instance1.sayAge(); //29
 
  var instance2 = new SubType("Greg", 27);
  alert(instance2.colors); //red,blue,green
  instance2.sayName(); //Greg
  instance2.sayAge(); //27

Nach dem Login kopieren

Kombinierte Vererbung vermeidet die Mängel von Prototypketten und geliehenen Konstruktoren und kombiniert deren Vorteile.

2. Prototypische Vererbung

Vererbung kann implementiert werden, ohne dass im Voraus ein Konstruktor definiert werden muss. Sein Wesen besteht darin, eine flache Kopie eines bestimmten Objekts durchzuführen. Die kopierte Kopie kann auch weiter transformiert werden.

function object(o) {
    function F(){};
    F.prototype = o;
    return new F;
  }
 
  var person = {
   name: "Nicholas",
   friends: ["Shelby", "Court", "Van"]
  };
 
  var antherPerson = object(person);
  antherPerson.name = "Greg";
  antherPerson.friends.push("Rob");
 
  var antherPerson = object(person);
  antherPerson.name = "Linda";
  antherPerson.friends.push("Barbie");
 
  alert(person.friends); //Shelby,Court,Van,Rob,Barbie

Nach dem Login kopieren

3. Parasitäre Vererbung

ist der prototypischen Vererbung sehr ähnlich und basiert ebenfalls auf einem Objekt oder a Erstellen Sie ein Objekt mit diesen Informationen, erweitern Sie das Objekt und geben Sie es schließlich zurück. Um das Ineffizienzproblem zu lösen, das durch das kombinierte Vererbungsmuster aufgrund mehrerer Aufrufe des Supertyp-Konstruktors verursacht wird, können Sie dieses Muster mit kombinierter Vererbung verwenden.

function object(o) {
    function F(){};
    F.prototype = o;
    return new F;
  }
  function createAnother(original) {
    var clone = object(original);
    clone.sayHi = function() {
      alert("Hi");
    };
    return clone;
  }
 
  var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
  };
 
  var anotherPerson = createAnother(person);
  anotherPerson.sayHi();

Nach dem Login kopieren

4. Parasitäre kombinierte Vererbung

vereint die Vorteile der parasitären Vererbung und der kombinierten Vererbung effiziente Möglichkeit zur Implementierung der Basistypvererbung.

//继承原型
  function extend(subType, superType) {
    function F(){};
    F.prototype = superType.prototype;
 
    var prototype = new F;
    prototype.constructor = subType;
    subType.prototype = prototype;
  }
 
  //超类方法
  function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  SuperType.prototype.sayName = function() {
    return this.name;
  }
 
  //子类方法
  function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
  }
 
  //继承超类的原型
  extend(SubType, SuperType);
 
  //子类方法
  SubType.prototype.sayAge = function() {
    return this.age;
  }
 
  var instance1 = new SubType("Shelby");
  var instance2 = new SubType("Court", 28);
 
  instance1.colors.push(&#39;black&#39;);
 
  alert(instance1.colors); //red,blue,green,black
  alert(instance2.colors); //red,blue,green
 
  alert(instance1 instanceof SubType); //true
  alert(instance1 instanceof SuperType); //true

Nach dem Login kopieren

Die hohe Effizienz dieses Beispiels besteht darin, dass es den SuperType-Konstruktor nur einmal aufruft und somit unnötige Redundanz bei SubType.prototype-Eigenschaften vermeidet. Gleichzeitig kann die Prototypenkette unverändert bleiben. Daher können Instanzen von und isPrototypeOf () weiterhin normal verwendet werden. Entwickler glauben im Allgemeinen, dass die parasitäre kompositorische Vererbung das idealste Vererbungsparadigma für Referenztypen ist.

Das obige ist der detaillierte Inhalt vonEinführung in verschiedene Vererbungskombinationen in JavaScript (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!