Analyse de l'héritage de classe dans ECMAScript 6 (avec exemples)

Le contenu de cet article concerne l'analyse de l'héritage de classe dans ECMAScript 6 (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Héritage de classe

Avant d'examiner l'héritage de classe, examinez d'abord comment le constructeur implémente l'héritage d'objet

        function F() {
            this.a = 1;
        }
        function Son() {
            F.call(this);
        } 
        function inherit(S, F) {
            S.prototype = Object.create(F.prototype);
            S.prototype.constructor = S;
        }
        inherit(Son, F);
        let son = new Son();

Il l'implémente lequel fonctions :

Hériter de cet attribut de F, qui est l'attribut de l'objet instance F

Son.prototype.__proto__ === F.prototype réalise l'héritage d'ancienneté

son.constructor permet à son fils de reconnaître ses ancêtres

Il en va de même pour l'héritage de classe

Utilisez les mots-clés extends et super pour voir un héritage simple

        class A {
            constructor() {
                this.a = 1;
            }
        }
        class B extends A {
            constructor() {
                super();
                this.b = 2;
            }
            m() {

            }
        }
        let b = new B();

Il implémente également ces trois fonctions de base

B {a: 1, b: 2}
b.__proto__  == B.prototype
b.__proto__.__proto__ === A.prototype
b.constructor === B

Je pense : le mot-clé extends réalise l'héritage du prototype et la modification du constructeur le mot-clé super réalise l'héritage de la classe parent this, et le super ; ici équivaut à A.prototype.constructor.call(this)

Note

Si vous écrivez un constructeur, vous devez y écrire super, sinon le nouvel objet d'instance de sous-classe signalera une erreur ; ou ne l'écrivez pas du tout ; deuxièmement, l'attribut this dans le constructeur de la sous-classe doit être écrit après l'héritage super

1 de ES5, l'essentiel est de créer d'abord l'objet d'instance this de la sous-classe, puis. ajoutez-y les méthodes de la classe parent (Parent .apply(this)). ES6 Le mécanisme d'héritage de votre propre objet doit d'abord être façonné via le constructeur de la classe parent pour obtenir les mêmes attributs et méthodes d'instance que la classe parent, puis le traiter en ajoutant les propres attributs et méthodes d'instance de la sous-classe. Si la super méthode n’est pas appelée, la sous-classe n’obtiendra pas l’objet this.

        class B extends A {
            constructor() {    //要么都不写，new时默认会自动生成
                super();
                this.b = 2;    //写在super后面
            } 
            m() {

            }
        }

Divers problèmes de pointage de super

super en tant que fonction ne peuvent être placés que dans le constructeur d'une sous-classe, pointant vers

A.prototype.constructor.call(this)

super en tant qu'objet , in Lorsqu'il est appelé dans les méthodes ordinaires d'une sous-classe, super est le prototype de la classe parent, qui est

; par conséquent, seules les méthodes de la chaîne de prototypes peuvent être appelées, et les méthodes et attributs des instances de la classe parent ne peuvent pas être utilisés. A.prototypeconstructor{} >

Et il est stipulé que

        class A {
            constructor() {

                this.a = 1;
            }
            n() {

                return this;
            }
        }
        class B extends A {
            constructor() {
                
                super();
                this.b = 2;
                
            }
            m() {
                return super.n();
            }
        }
        let b = new B();
        b === b.m();

Lors de l'appel de la méthode de la classe parent via super dans la méthode ordinaire de la sous-classe, ceci à l'intérieur des points de méthode à l’instance de sous-classe actuelle.

Donc, renvoyer ceci ci-dessus consiste à renvoyer l'objet d'instance de sous-classe

Lorsque super est utilisé comme objet pour attribuer des attributs aux attributs

super est équivalent à cela, et les attributs attribués deviennent des attributs de l'instance de sous-classe

Super en tant qu'objet, dans la méthode statique, il pointe vers la classe parent qui peut appeler la méthode statique de la classe parent. S'il y a ceci à l'intérieur de la méthode, il pointe. à la sous-classe actuelle

class A {
  constructor() {
    this.x = 1;
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
    console.log(super.valueOf() instanceof B);   //true
  }
}

let b = new B();

Seule la classe peut appeler la méthode statique de la classe

Étant donné que les objets héritent toujours d'autres objets, vous pouvez utiliser le mot-clé super dans n'importe quel objet.

        class A {
            constructor() {

                this.a = 1;
            }
            static n() {

                return this;
            }
        }
        class B extends A {
            constructor() {
                
                super();
                this.b = 2;
                
            }
            static m() {
                return super.n();
            }
        }
        console.log(A.n() === A)   // true
        console.log(B === B.m());  //true

Le prototype et __proto__ de la classe

var obj = {
  toString() {
    return "MyObject: " + super.toString();
  }
};
Object.getPrototypeOf(obj).toString = function () {
    return "这里super等于obj.__proto__";
}
console.log(obj.toString());        //MyObject: 这里super等于obj.__proto__

(1) L'attribut __proto__ de la sous-classe représente l'héritage du constructeur et pointe toujours vers la classe parent.

(2) L'attribut __proto__ de l'attribut prototype de la sous-classe représente l'héritage de la méthode et pointe toujours vers l'attribut prototype de la classe parent.

Mode d'héritage de classe

C'est aussi grâce à cette implémentation que les classes peuvent appeler leurs propres méthodes statiques

class A {
}

class B {
}

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);

const b = new B();

es6 implémente l'héritage du constructeur d'origine

Auparavant, Array.apply(this)this ne façonnait pas la structure interne d'Array, donc lorsque nous utilisions des objets de type tableau pour référencer des méthodes de tableau, nous utilisions null à la place

et es6 utilise des classes pour implémenter son héritage,

Le code est extrait de es6 Getting Started

Il convient de noter que

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}

var arr = new MyArray();
arr[0] = 12;
arr.length // 1

arr.length = 0;
arr[0] // undefined

ES6 a modifié le comportement du constructeur Object Une fois qu'il a été découvert que la méthode Object ne l'est pas. appelé via new Object(), ES6 stipule que le constructeur Object ignore les paramètres.

Les paramètres transmis seront invalides

class NewObj extends Object{
  constructor(){
    super(...arguments);
  }
}
var o = new NewObj({attr: true});
o.attr === true  // false

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!