Vier Arten der Vererbung in Javascript (Codebeispiele)-js-Tutorial-php.cn

In diesem Artikel geht es um die vier Arten der JavaScript-Vererbung (Codebeispiele). Ich hoffe, dass er für Freunde hilfreich ist.

1. Vererbung der Prototypenkette

Kern: Verwenden Sie die Instanz der übergeordneten Klasse als Prototyp der untergeordneten Klasse

Nachteile: Neue Prototypenmethode für die übergeordnete Klasse/Prototyp-Attribute können Unterklassen auf sie zugreifen. Wenn sich die übergeordnete Klasse ändert, ändert sich alles andere

        function Person (name) {
            this.name = name;
        };

        Person.prototype.getName = function () {    //对原型进行扩展
            return this.name;
        };

        function Parent (age) {
            this.age = age;
        };

        Parent.prototype = new Person('老明');   //这一句是关键 //通过构造器函数创建出一个新对象，把老对象的东西都拿过来。

        Parent.prototype.getAge = function () {
            return this.age;
        };

//        Parent.prototype.getName = function () {   //可以重写从父类继承来的方法,会优先调用自己的。
//            console.log(222);
//        };

        var result = new Parent(22);
        console.log(result.getName());  //老明　　//调用了从Person原型中继承来的方法(继承到了当前对象的原型中)　　
        console.log(result.getAge());   //22 　　//调用了从Parent原型中扩展来的方法

Nach dem Login kopieren

2. Strukturelle Vererbung

Grundidee
Ausleihender Konstruktor Die Grundidee besteht darin, mit call oder apply die durch this in der übergeordneten Klasse angegebenen Attribute und Methoden in die von der Unterklasse erstellte Instanz zu kopieren (auszuleihen).
Weil das this-Objekt zur Laufzeit basierend auf der Ausführungsumgebung der Funktion gebunden ist. Das heißt, global gesehen ist this gleich window, und wenn eine Funktion als Methode eines Objekts aufgerufen wird, ist this gleich diesem Objekt. Die Methoden
call, apply können den Objektkontext einer Funktion vom Anfangskontext in das durch thisObj angegebene neue Objekt ändern.

Dieser geliehene Konstruktor besteht also darin, dass beim Erstellen des new-Objekts (wenn ein neues erstellt wird, zeigt this auf die erstellte Instanz) ein neues Instanzobjekt erstellt wird,
und und Parent in Parent ruft call auf, was bedeutet, dass der Person-Zeiger so geändert wird, dass er auf die neue Instanz this zeigt, sodass das geändert wird 🎜>Die relevanten Attribute und Methoden werden der neuen Instanz zugewiesen, anstatt sie Person zuzuweisen, sodass alle Instanzen über diese this-Attribute und Methoden verfügen, die von der übergeordneten Klasse definiert sind. Person
Da die Eigenschaften an this gebunden sind, werden sie beim Aufruf den entsprechenden Instanzen zugewiesen, und die Werte der einzelnen Instanzen wirken sich nicht gegenseitig aus.

Kern: Die Verwendung des Konstruktors der übergeordneten Klasse zum Erweitern der Instanz der Unterklasse entspricht dem Kopieren der Instanzattribute der übergeordneten Klasse in die Unterklasse (es wird kein Prototyp verwendet)this

Nachteile: Alle Methoden sind in der Konstruktordefinition enthalten, können nur die Instanzattribute und -methoden der übergeordneten Klasse erben, können die Prototypattribute/-methoden nicht erben und können keine Funktionswiederverwendung implementieren. Jede Unterklasse verfügt über eine Kopie der Instanzfunktion der übergeordneten Klasse Leistung

      function Person (name) {
            this.name = name;
            this.friends = ['小李','小红'];
            this.getName = function () {
                return this.name;
            }
        };

//        Person.prototype.geSex = function () {    //对原型进行扩展的方法就无法复用了
//            console.log("男");
//        };

        function Parent = (age) {
            Person.call(this,'老明');　　//这一句是核心关键
            //这样就会在新parent对象上执行Person构造函数中定义的所有对象初始化代码，
            // 结果parent的每个实例都会具有自己的friends属性的副本
            this.age = age;
        };

        var result = new Parent(23);
        console.log(result.name);　　　　//老明
        console.log(result.friends);　　//["小李", "小红"]
　　　　 console.log(result.getName());　　//老明
　　　　 console.log(result.age);　　　　//23
　　　　 console.log(result.getSex());　　//这个会报错，调用不到父原型上面扩展的方法

Nach dem Login kopieren

3. Kombinierte Vererbung

Kombinierte Vererbung (alle Instanzen können ihre eigenen Attribute haben und dieselbe Methode verwenden. Die kombinierte Vererbung vermeidet die Mängel der Prototypenkette und geliehener Konstruktor und kombiniert die beiden Der Vorteil beider ist die am häufigsten verwendete Vererbungsmethode)

Kern: Durch Aufrufen des Konstruktors der übergeordneten Klasse werden die Eigenschaften der übergeordneten Klasse geerbt und die Vorteile der Übergabe von Parametern beibehalten Verwenden Sie dann die Instanz der übergeordneten Klasse als Prototyp der Unterklasse, um eine Wiederverwendung von Funktionen zu erreichen

Nachteile: Der Konstruktor der übergeordneten Klasse wird zweimal aufgerufen und es werden zwei Instanzen generiert (die Instanz der Unterklasse blockiert die Instanz auf dem Prototyp der Unterklasse)

        function Person  (name) {
             this.name = name;
             this.friends = ['小李','小红'];
         };

         Person.prototype.getName = function () {
             return this.name;
         };

        function Parent (age) {
            Person.call(this,'老明');　　//这一步很关键
            this.age = age;
        };

        Parent.prototype = new Person('老明');　　//这一步也很关键
        var result = new Parent(24);
        console.log(result.name);　　　　//老明
        result.friends.push("小智");　　//
        console.log(result.friends);　　//['小李','小红','小智']
        console.log(result.getName());　　//老明
        console.log(result.age);　　　　//24

        var result1 = new Parent(25);   //通过借用构造函数都有自己的属性，通过原型享用公共的方法
        console.log(result1.name);　　//老明
        console.log(result1.friends);　　//['小李','小红']

Nach dem Login kopieren

4. Parasitäre Kombinationsvererbung

Kern: Schneiden Sie die Instanzattribute der übergeordneten Klasse durch Parasitismus ab, sodass der Konstruktor der übergeordneten Klasse zweimal aufgerufen wird Instanzmethode wird nicht zweimal initialisiert/ Attribute vermeiden die Mängel der kombinierten Vererbung

Nachteile: perfekt, aber die Implementierung ist komplizierter

        function Person(name) {
            this.name = name;
            this.friends = ['小李','小红'];
        }

        Person.prototype.getName = function () {
            return this.name;
        };

        function Parent(age) {
            Person.call(this,"老明");
            this.age = age;
        }

        (function () {
            var Super = function () {};     // 创建一个没有实例方法的类
            Super.prototype = Person.prototype;
            Parent.prototype = new Super();     //将实例作为子类的原型
        })();

        var result = new Parent(23);
        console.log(result.name);
        console.log(result.friends);
        console.log(result.getName());
        console.log(result.age);

Nach dem Login kopieren

[Verwandte Empfehlungen:

JavaScript-Video-Tutorial

]

Das obige ist der detaillierte Inhalt vonVier Arten der Vererbung in Javascript (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!