Quatre modes d'héritage en JavaScript (exemples de code)

Ce que cet article vous apporte concerne les quatre méthodes d'héritage JavaScript (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Héritage de la chaîne de prototypes

Noyau : utiliser l'instance de la classe parent comme prototype de la classe enfant

Inconvénients : Nouvelle méthode de prototype pour la classe parent/Les attributs du prototype sont accessibles par les sous-classes. Lorsque la classe parent change, tout le reste change

        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原型中扩展来的方法

2. Héritage structurel

Idée de base <.> Emprunt L'idée de base du constructeur est d'utiliser
ou call pour copier (emprunter) les attributs et méthodes spécifiés par apply dans la classe parent vers l'instance créée par la sous-classe. thisParce que l'objet
est lié au moment de l'exécution en fonction de l'environnement d'exécution de la fonction. Autrement dit, globalement, this est égal à this, et lorsqu'une fonction est appelée comme méthode d'un objet, window est égal à cet objet. Les méthodes this
, call peuvent changer le contexte d'objet d'une fonction du contexte initial au nouvel objet spécifié par thisObj. apply

Donc, ce constructeur emprunté est que lorsque l'objet

est créé (lorsque new est créé, new pointe vers l'instance créée), un nouvel objet instance est créé, this et exécute et
à l'intérieur de Parent appelle Parent, ce qui signifie que le pointeur call est modifié pour pointer vers la nouvelle instance, Person, donc le this sera modifié 🎜>Les attributs et méthodes pertinents sont attribués à la nouvelle instance au lieu de les attribuer à
, Person donc toutes les instances ont ces this attributs et méthodes définis par la classe parent. Person
Étant donné que les propriétés sont liées à this, elles sont affectées aux instances correspondantes lorsqu'elles sont appelées, et les valeurs de chaque instance ne s'affecteront pas.

Core : Utiliser le constructeur de la classe parent pour améliorer l'instance de la sous-classe équivaut à copier les attributs d'instance de la classe parent dans la sous-classe (aucun prototype n'est utilisé)this

Inconvénients : Les méthodes sont toutes dans le constructeur défini dans, ne peuvent hériter que des attributs et méthodes d'instance de la classe parent, ne peuvent pas hériter des attributs/méthodes du prototype et ne peuvent pas implémenter la réutilisation des fonctions. Chaque sous-classe a une copie de la fonction d'instance de la classe parent, ce qui affecte. performances

3. Héritage combiné

      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());　　//这个会报错，调用不到父原型上面扩展的方法

Héritage combiné (toutes les instances peuvent avoir leurs propres propriétés et utiliser la même méthode. L'héritage combiné évite les défauts du prototype chaînes et constructeurs empruntés. Combinaison Elle présente deux avantages et est la méthode d'héritage la plus couramment utilisée)

Core : en appelant le constructeur de la classe parent, héritez des propriétés de la classe parent et conservez les avantages du passage des paramètres, et puis utilisez l'instance de classe parent comme prototype de la sous-classe, réalisez la réutilisation des fonctions

Inconvénients : le constructeur de la classe parent est appelé deux fois et deux instances sont générées (l'instance de sous-classe bloque celle du prototype de sous-classe)

4. Héritage de combinaison parasite

        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);　　//['小李','小红']

Core : Coupez les attributs d'instance de la classe parent par parasitisme, de sorte que lorsque le constructeur de la classe parent est appelé deux fois, les deux structures ne seront pas initialisées. Les méthodes/propriétés de sous-instance évitent les défauts de l'héritage combiné

Inconvénients : parfait, mais la mise en œuvre est plus compliquée

[Recommandations associées. :

Tutoriel vidéo JavaScript

        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);

】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!