Class inheritance analysis in ECMAScript 6 (with examples)-JS Tutorial-php.cn

The content of this article is about class inheritance analysis in ECMAScript 6 (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Class inheritance

Before looking at class inheritance, first review how the constructor implements object inheritance

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

Copy after login

What does it implement Function:

Inherit the this attribute of F, which is the attribute of the F instance object

Son.prototype.__proto__ === F.prototype realizes the inheritance of seniority

son.constructor allows son to recognize his ancestors and return to his ancestors

The same is true for class inheritance

Used with extends and super keywords, look at a simple inheritance

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

            }
        }
        let b = new B();

Copy after login

also achieves that Three basic functions

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

Copy after login

I think: the keyword extends realizes the inheritance of the prototype and the modification of the constructor; the keyword super realizes the inheritance of the parent class this, and the super here is equivalent to A.prototype.constructor. call(this)

Note

If you write a constructor, you must write super in it, otherwise the new subclass instance object will report an error; or do not write it at all; secondly, in the constructor of the subclass The this attribute must be written after super

1. ES5 inheritance, the essence is to first create the instance object this of the subclass, and then add the method of the parent class to this (Parent.apply(this)) . ES6 The inheritance mechanism of Your own this object must first be shaped through the constructor of the parent class to obtain the same instance attributes and methods as the parent class, and then be processed and add the subclass's own instance attributes and methods. If the super method is not called, the subclass will not get this object.

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

            }
        }

Copy after login

Various pointing issues of super

As a function, super can only be placed in the constructor of a subclass, pointing to

A.prototype.constructor.call(this)

Super is used as an object and is called in the ordinary method of the subclass. Super is the prototype of the parent class, which is

A.prototype; so only methods on the prototype chain can be called, and the parent class cannot be used. The methods and attributes of the instance constructor{} cannot be called

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

Copy after login

and it is stipulated that

when calling the method of the parent class through super in the ordinary method of the subclass, inside the method This points to the current subclass instance.

So return this above is to return the subclass instance object

When super is used as an object to assign attributes to properties

super is equivalent to this, and the assigned attributes become attributes of the subclass instance

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

Copy after login

Super as an object, in the static method, points to the parent class that can call the static method of the parent class. If there is this inside the method, it points to the current subclass

Only the class can call the static method of the class

        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

Copy after login

Since objects always inherit other objects, you can use the super keyword in any object. The prototype and __proto__ of the

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

Copy after login

class (1) The proto attribute of the subclass indicates the inheritance of the constructor and always points to the parent class.

(2) The __proto__ attribute of the prototype attribute of the subclass represents the inheritance of the method and always points to the prototype attribute of the parent class.

Class inheritance mode

class A {
}

class B {
}

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

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

const b = new B();

Copy after login

It is also because of this implementation that the class can call its own static method

es6 implements the inheritance of the original constructor

Previously, Array.apply(this)this did not shape the internal structure of Array, so when we used array-like objects to reference array methods, we used null instead

and es6 uses classes to implement its inheritance,
code Excerpted from 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

Copy after login

It should be noted that

ES6 has changed the behavior of the Object constructor. Once it is found that the Object method is not called through new Object(), ES6 stipulates that the Object constructor will Parameters are ignored.

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

Copy after login

The incoming parameters will be invalid

The above is the detailed content of Class inheritance analysis in ECMAScript 6 (with examples). For more information, please follow other related articles on the PHP Chinese website!