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() {

            }
        }

A.prototype.constructor.call(this)

; 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{} >

        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

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

É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

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

Mode d'héritage de classe

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

Le code est extrait de es6 Getting Started

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.

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!