Detaillierte Erläuterung der JavaScript-Vererbungsmethode

Es gibt sechs Hauptvererbungsmethoden:

1. Die Prototypenkettenvererbung weist das Problem der gemeinsamen Nutzung von Objekten auf.

2. Die Konstruktorvererbung wird mithilfe der Call-Apply-Methode realisiert: Funktionswiederverwendbarkeitsproblem Bei jeder Instanziierung wird die übergeordnete Klasse erneut ausgeführt und die Methoden in der übergeordneten Klasse werden wiederholt definiert

3. Kombinationsmodus (Prototypkettenkonstruktor) Konstruktor-Vererbungsattribut, Prototypketten-Vererbungsmethode: Löst die gemeinsame Nutzung von Objekten. aber Attributvererbung erscheint zweimal

Die Prototyp-Methode verwendet eine Leerzeichenfunktion

Die parasitäre Methode fügt der Prototyp-Methode zusätzliche Methoden hinzu

Die parasitäre Kombination Methode (Das Problem der doppelten Attributvererbung wurde gelöst)

1. Prototypkettenmethode

Wenn eine Unterklasse eine übergeordnete Klasse erbt, verweist sie auf den Prototyp der Unterklasse auf ein Instanzobjekt der übergeordneten Klasse Klasse. Wenn eine Unterklasse instanziiert wird, teilen alle Instanzen der Unterklasse die Attribute und Methoden der Instanz der übergeordneten Klasse (angenommen, sie heißt p). Wenn auf p ein Referenzattribut vorhanden ist, kann die Instanz der Unterklasse die Referenz ändern type.-Eigenschaft, wodurch diese Eigenschaft auch auf anderen Instanzen geändert wird.

//原型链方式
function A(){
    this.name = 'lc';
    this.stus = ['a','b','c'];
}
A.prototype.introduce = function (){
    alert(this.name);
}
 
function B(){}
B.prototype = new A();
 
var s1 = new B();
var s2 = new B();
console.log(s1.stus);  //['a','b','c']  
s1.stus.push('d');     //改变s1上的属性，会影响s2上的该属性
console.log(s2.stus);  // ['a','b','c','d']

Eine Änderung wie folgt hat keine Auswirkungen.

//原型链方式
function A(){
    this.name = 'lc';
    this.stus = ['a','b','c'];
}
A.prototype.introduce = function (){
    alert(this.name);
}
 
function B(){}
B.prototype = new A();
 
var s1 = new B();
var s2 = new B();
 
s1.stus = ['d'];   //在s1上增加了属性，  就近原则，不在查找原型链上的同名属性
console.log(s1.stus);  //['d']
console.log(s2.stus);  // ['a','b','c']

2. Vererbung im Konstruktormodus

Gemeinsam genutzte Konstruktoren und Methoden sind alle intern definiert, daher kann die Wiederverwendbarkeit der Antwortfunktion nicht diskutiert werden.

//构造函数方式继承
function A(name){
    this.name = name;
    this.type = 'parent';
    this.introduce = function (){ alert(this.name);}
}
A.prototype.sayhi = function (){
    alert(this.type);
}
function B(name,age){
    A.call(this,name);  //使用call方法 实现继承 但是父类中的方法重复定义 无复用性
    this.age = age;
    this.introduce = function (){ alert(this.name+this.age);}
}
 
var b = new B('lc',25);
b.introduce(); //lc25
b.sayhi();  //parent

3. Gemischte Methode (Prototypmethode, Konstruktormethode)

Verwenden Sie den Konstruktor, um Eigenschaften zu erben, Prototypkettenvererbungsmethode

Aber es gibt einen Nachteil: Bei der Verwendung Bei der Vererbung der Prototypenkette werden die Eigenschaften tatsächlich vererbt und wiederholt.

function A(name){
    this.name = name;
    this.type = 'parent';
}
A.prototype.sayhi = function (){
    alert(this.type);
}
function B(name,age){
    A.call(this,name);
    this.age = age;
    this.introduce = function (){ alert(this.name+this.age);}
}
B.prototype = new A();

4. Prototypische Vererbung

verwendet eine Zwischen-Leerfunktion, um ein Objekt nach der Vererbung zurückzugeben.

function extend(parent){
    function F(){}
    F.prototype = parent;
    return new F();
}

5. Parasitäre Vererbung Fügen Sie dem Objekt basierend auf dem Prototyp Attributmethoden hinzu

function extend(parent){
    function F(){}
    F.prototype = parent;
    return new F();
}
 
function createObj(p){  
    var clone = extend(p);
    clone.name = 'hello';    
    clone.say = function (){}
    return clone;
}

6. Parasitäre kombinierte Vererbung

In der Vererbungsmethode Wenn , Instanziieren Sie nicht mehr den Konstruktor des übergeordneten Typs, sondern verwenden Sie die Methode inheritPrototype. Verwenden Sie eine leere Zwischenfunktion, lassen Sie diese leere Funktion den Prototyp der übergeordneten Klasse erben und instanziieren Sie dann diese leere Funktion (erben Sie alle Eigenschaften in der Prototypmethode der übergeordneten Klasse). . Richten Sie einfach den Prototyp der Unterklasse auf dieses instanziierte leere Objekt.

Vermeiden Sie die Instanziierung des Konstruktors der übergeordneten Klasse.

/* 寄生组合式继承 */
function inheritPrototype(subType, superType) {
  // var obj= extend(superType.prototype);
  function F(){}
  F.prototype = superType.prototype;
  var obj= new F();
 
  //obj.constructor = subType;
  subType.prototype = obj;    //不可将subType的prototype直接指向superType，否则的话，对子类prototype的修改会反应到父类上，  引用型变量
  subType.prototype.constructor = subType;
}

Objektidentitätswechsel: Verwenden Sie einen Konstruktor, um eine Klasse zu deklarieren, verweisen Sie eine Klassenmethode auf einen anderen Konstruktor (da der Konstruktor selbst eine Methodenfunktion ist) und implementieren Sie die Vererbung

function A(){
    this.name = {name1:'hello'};
    this.say = function (){ console.log(this.name);}
}
function B(){
    this.method = A;
    this.method();
    delete this.method;
}
 var bObj = new B();