Eine detaillierte Einführung in die Vererbungsmethoden und Vor- und Nachteile von js-Konstruktoren (vollständiger Code)

Dieser Artikel stellt hauptsächlich die Vererbung von Konstruktoren (Vererbung von Klassen) vor und beinhaltet auch die Einführung von ES5 und ES6. Aufgrund der begrenzten Fähigkeiten wird es in dem Artikel zwangsläufig unangemessene oder falsche Stellen geben Korrigiere mich ~

js-Konstruktor

Prototyp

Lassen Sie uns zunächst kurz die Instanzattribute/-methoden und Prototypattribute/-methoden vorstellen, um Verstehen Sie Folgendes besser:

function Persion(name){
    this.name = name;                                       // 属性
    this.setName = function(nameName){                      // 实例方法
        this.name = newName;
    }
}
Persion.prototype.sex = 'man';                              // 向 Persion 原型中追加属性（原型方法）

var persion = new Persion('张三');                          // 此时我们实例化一个persion对象，看一下name和sex有什么区别

Persion in der Konsole anzeigen und wie folgt ausdrucken:
Die ursprünglich über den Prototyp hinzugefügten Attribute werden in der Prototypkette des Instanzobjekts angezeigt ,
Jedes Objekt verfügt über ein integriertesProtoobjekt. Wenn ein Attribut im aktuellen Objekt nicht gefunden wird, wird es in seiner Prototypenkette (d. h. Prototypenkette) gesucht

Sehen wir uns das folgende Beispiel an
Hinweis: Im Konstruktor gibt es im Allgemeinen nur wenige Referenzattribute in Form von Arrays. In den meisten Fällen handelt es sich um: Basisattribute + Methoden.

function Animal(n) {                                       // 声明一个构造函数
    this.name = n;                                         // 实例属性
    this.arr = [];                                         // 实例属性（引用类型）
    this.say = function(){                                 // 实例方法
        return 'hello world';
    }
}
Animal.prototype.sing = function() {                       // 追加原型方法  
    return '吹呀吹呀，我的骄傲放纵~~';
}
Animal.prototype.pArr = [];                                // 追加原型属性（引用类型）

Als nächstes werfen wir einen Blick auf den Unterschied zwischen Instanzeigenschaften/-methoden und Prototypeigenschaften/-methoden
Der Zweck des Prototypobjekts besteht darin, gemeinsame Methoden und Eigenschaften für jedes Instanzobjekt zu speichern ist nur ein ganz gewöhnliches Objekt. Und alle Instanzen nutzen dasselbe Prototypobjekt, sodass es im Gegensatz zu Instanzmethoden oder -eigenschaften nur eine Kopie des Prototypobjekts gibt. Es gibt viele Instanzen und Instanzeigenschaften und -methoden sind unabhängig.

var cat = new Animal('cat');                               // 实例化cat对象
var dog = new Animal('dog');                               // 实例化狗子对象

cat.say === dog.say                                        // false 不同的实例拥有不同的实例属性/方法
cat.sing === dog.sing                                      // true 不同的实例共享相同的原型属性/方法

cat.arr.push('zz');                                        // 向cat实例对象的arr中追加元素；（私有）
cat.pArr.push('xx');                                       // 向cat原型对象的pArr中追加元素；（共享）
console.log(dog.arr);                                      // 打印出 []，因为cat只改变了其私有的arr
console.log(dog.pArr);                                     // 打印出 ['xx'], 因为cat改变了与狗子（dog）共享的pArr

Natürlich sind die Prototypattribute grundlegende Datentypen und werden nicht geteilt
Im Konstruktor: für den Datenschutz von Attributen (Instanz-Basisattribute) und Methoden (Instanzreferenzattribute) wiederverwenden und teilen. Wir empfehlen:
1. Eigenschaften in Konstruktoren kapseln
2. Methoden für Prototypobjekte definieren

ES5-Vererbungsmethode

Zuerst definieren wir eine Animal-Elternklasse

function Animal(n) {                              
    this.name = n;                                          // 实例属性
    this.arr = [];                                          // 实例属性（引用类型）
    this.say = function(){                                  // 实例方法
        return 'hello world';
    }
}
Animal.prototype.sing = function() {                        // 追加原型方法  
    return '吹呀吹呀，我的骄傲放纵~~';
}
Animal.prototype.pArr = [];                                 // 追加原型属性（引用类型）

1. Prototypenkettenvererbung

function Cat(n) {
    this.cName = n;
}
Cat.prototype = new Animal();                               // 父类的实例作为子类的原型对象

var tom = new Cat('tom');                                   // 此时Tom拥有Cat和Animal的所有实例和原型方法/属性，实现了继承
var black = new Cat('black');

tom.arr.push('Im tom');
console.log(black.arr);                                     // 打印出 ['Im tom'], 结果其方法变成了共享的，而不是每个实例所私有的，这是因为父类的实例方法/属性变成了子类的原型方法/属性了；

Vorteile: Das untergeordnete Objekt realisiert die Vererbung der Instanzmethoden/-eigenschaften und Prototypmethoden/-eigenschaften des übergeordneten Objekts;
Nachteile: Unterklasseninstanzen teilen sich die Referenzdatentypattribute des übergeordneten Klassenkonstruktors.

2. Ausleihen des Konstruktors

function Cat(n) {
    this.cName = n;                     
    Animal.call(this, this.cName);                           // 核心，把父类的实例方法属性指向子类
}

var tom = new Cat('tom');                                    // 此时Tom拥有Cat和Animal的所有实例和原型方法/属性，实现了继承
var black = new Cat('black');

tom.arr.push('Im tom');
console.log(black.arr);                                      // 打印出 [], 其方法和属性是每个子类实例所私有的；
tom.sing();                                                  // undefind 无法继承父类的原型属性及方法；

Vorteile:
1. Implementierung der Instanzmethoden/-eigenschaften des übergeordneten Objekts Objektvererbung, die von jeder Unterklasseninstanz geerbten Methoden und Attribute sind privat
2. Beim Erstellen einer Unterklasseninstanz können Sie Parameter an den Konstruktor der übergeordneten Klasse übergeben >Nachteile: Unterklasseninstanzen können die Konstruktionsattribute und -methoden der übergeordneten Klasse nicht erben.
3. Kombinationsvererbung

function Cat(n) {
this.cName = n;                     
    Animal.call(this, this.cName);                          // 核心，把父类的实例方法属性指向子类
}
Cat.prototype = new Parent()                                // 核心, 父类的实例作为子类的原型对象
Cat.prototype.constructor = Cat;                            // 修复子类Cat的构造器指向，防止原型链的混乱

tom.arr.push('Im tom');
console.log(black.arr);                                     // 打印出 [], 其方法和属性是每个子类实例所私有的；
tom.sing();                                                 // 打印出 '吹呀吹呀，我的骄傲放纵~~'; 子类继承了父类的原型方法及属性

Vorteile:

1. Beim Erstellen einer Unterklasseninstanz können Sie Parameter an den Konstruktor der übergeordneten Klasse übergeben.
2. Die Instanzmethode der übergeordneten Klasse wird im Prototypobjekt der übergeordneten Klasse definiert ;
3. Den Konstruktor und die Attribute der übergeordneten Klasse nicht teilen.
Nachteil: Der Konstruktor der übergeordneten Klasse wird zweimal aufgerufen 🎜>
4. Parasitäre KombinationsvererbungVorteile:

1. Erstellen Sie eine Unterklasseninstanz und übergeben Sie Parameter an den Konstruktor der übergeordneten Klasse 🎜>

2. Instanzen von Unterklassen teilen sich nicht den Konstruktor und die Attribute der übergeordneten Klasse.
3
Nachteile: Die übergeordnete Klasse und die untergeordnete Klasse verwenden denselben Prototyp, wodurch sich die Prototypänderung der untergeordneten Klasse auf die Vererbung der parasitären Kombination auswirkt (einfach). perfekt)

function Cat(n) {
this.cName = n;                     
    Animal.call(this, this.cName);                          // 核心，把父类的实例方法属性指向子类
}
Cat.prototype = Parent.prototype;                           // 核心, 将父类原型赋值给子类原型（子类原型和父类原型，实质上是同一个）
Cat.prototype.constructor = Cat;                            // 修复子类Cat的构造器指向，防止原型链的混乱

tom.arr.push('Im tom');
console.log(black.arr);                                     // 打印出 [], 其方法和属性是每个子类实例所私有的；
tom.sing();                                                 // 打印出 '吹呀吹呀，我的骄傲放纵~~'; 子类继承了父类的原型方法及属性
tom.pArr.push('publish');                                   // 修改继承于父类原型属性值 pArr;
console.log(black.pArr);                                    // 打印出 ['publish'], 父类的原型属性/方法 依旧是共享的，
// 至此简直是完美呀~~~ 然鹅！
Cat.prototype.childrenProp = '我是子类的原型属性！';
var parent = new Animal('父类');
console.log(parent.childrenProp);                           // 打印出'我是子类的原型属性！' what? 父类实例化的对象拥有子类的原型属性/方法，这是因为父类和子类使用了同一个原型

Vorteile: Perfekte Implementierung der Vererbung;
Nachteile: Relativ komplexe Implementierung

Angehängte YUI-Bibliothek zur Implementierung der Vererbung

function Cat(n) {
this.cName = n;                     
    Animal.call(this, this.cName);                          // 核心，把父类的实例方法属性指向子类；
}
var F = function(){};                                       // 核心，利用空对象作为中介；
F.prototype = Parent.prototype;                             // 核心，将父类的原型赋值给空对象F；
Cat.prototype = new F();                                    // 核心，将F的实例赋值给子类；
Cat.prototype.constructor = Cat;                            // 修复子类Cat的构造器指向，防止原型链的混乱；
tom.arr.push('Im tom');
console.log(black.arr);                                     // 打印出 [], 其方法和属性是每个子类实例所私有的；
tom.sing();                                                 // 打印出 '吹呀吹呀，我的骄傲放纵~~'; 子类继承了父类的原型方法及属性；
tom.pArr.push('publish');                                   // 修改继承于父类原型属性值 pArr；
console.log(black.pArr);                                    // 打印出 ['publish'], 父类的原型属性/方法 依旧是共享的；
Cat.prototype.childrenProp = '我是子类的原型属性！';
var parent = new Animal('父类');
console.log(parent.childrenProp);                           // undefind  父类实例化的对象不拥有子类的原型属性/方法；

bedeutet für Kinder Das Objekt legt ein Uber-Attribut fest, das direkt auf das Prototypattribut des übergeordneten Objekts verweist. (Uber ist ein deutsches Wort, das „oben“ oder „eine Ebene höher“ bedeutet.) Dies entspricht dem Öffnen eines Kanals für das untergeordnete Objekt, und Sie können die Methode des übergeordneten Objekts direkt aufrufen. Diese Zeile wird hier nur platziert, um die Vollständigkeit der Vererbung zu gewährleisten, und dient ausschließlich Sicherungszwecken. ES6-Vererbungsmethode

function extend(Child, Parent) {
    var F = function(){};
    F.prototype = Parent.prototype;
    hild.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;                          
}
// 使用
extend(Cat,Animal);

Verwandte Artikel:

Vererbungsmethode des PHP-Konstruktors, PHP-Konstruktorvererbung

Child.uber = Parent.prototype;Ähnliche Videos:

Geek Academy PHP objektorientiertes Video-Tutorial

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in die Vererbungsmethoden und Vor- und Nachteile von js-Konstruktoren (vollständiger Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!