Inheritance in JS

Prototype Chain Inheritance

Inheritance means that a child class inherits the properties and methods of the parent class

        //Parent Class
        function A(x) {
            this.x = x
        }
        A.prototype.getX = function () {
            console.log(this.x);
        }

        //Subclass
        function B(y) {
            this.y = y
        }
        B.prototype = new A(100);
        B.prototype.constructor = B;
        B.prototype.getY = function () {
            console.log(this.y);
        }

        let b = new B(200);
        b.x = 1000
        console.log(b.x);//1000
        console.log(b);

Features: Prototype chain inheritance refers to subclass prototype attributes pointing to instances of the parent class. Instances that want to invoke these methods are actually based on the mechanism of finding the prototype chain.

The goal is to enable instances of subclasses to use the properties and methods of the parent class

Subclasses can override properties and methods on the parent

call Inheritance

         //Parent Class
        function A(x) {
            this.x = x;
            this.f = function () {
                console.log("Ha-ha");
            }
        }
        A.prototype.getX = function () {
            console.log(this.x);
        }
        let a = new A(100);
        console.log(a);//A {x: 100, f: ƒ}
        // Subclass
        function B(y, x) {
            this.y = y;
            A.call(this, x);
        }
        B.prototype.getY = function () {
            console.log(this.y);
        }

        let b = new B(200, 100);
        console.log(b)//{y: 200, x: 100, f: ƒ}

Within a subclass, use call() to call the parent method to modify this of the parent class to this of the subclass. Having the parent execute the subclass again in the subclass function also has instance properties of the parent class

Features: Private properties and methods of the parent class become private properties and methods of the child class

Subclasses can only inherit private properties of the parent class

   

Combinatorial Inheritance

Combining prototype chain inheritance with borrowing constructor inheritance;

         //Parent Class
        function A(x) {
            this.x = x;
            this.f = function () {
                console.log("Ha-ha");
            }
        }

        A.prototype.getX = function () {
            console.log(this.x);
        }

        //Subclass
        function B(y, x) {
            this.y = y;
            A.call(this, x);
        }

        B.prototype = new A(100);
        B.prototype.constructor = B;
        B.prototype.getY = function () {
            console.log(this.y);
        }

        let b = new B(200, 100);
        console.log(b);

(call inheritance)

1. Subclass instances can use properties and methods that are private to the parent class

2. Both parent private properties and methods become child instance private properties and methods

(prototype chain inheritance)

3. Subclass instances can access and use properties and methods common to the parent through the prototype chain

4. There will be a redundant parent's private properties and methods on the prototype chain of the subclass

Parasitic combinatorial inheritance

Combining prototype chain inheritance with call inheritance requires you to create an object of your own and have the prototype of this object point to the prototype of the parent constructor. Implement parasitic combinatorial inheritance

        //Parent Class
        function A(x) {
            this.x = x
            this.say = function () {
                console.log('kin');
            }
        }
        A.prototype.getX = function () {
            console.log("getX", this.x);
        }
        let a = new A(100)
        console.log(a);//A {x: 100, say: ƒ}

        // Subclass
        function B(y, x) {
            A.call(this, 666)
            this.y = y
        }
        B.prototype = {}
        B.prototype = Object.create(A.prototype)

        B.prototype.constructor = B

        B.prototype.getY = function () {
            console.log("getY", this.y);
        }

        let b = new B(200)
        console.log(b);//B {x: 666, y: 200, say: ƒ}

Features: Private attributes and methods of the parent class, become private attributes and methods of instances of subclasses.
Attributes and methods that are common to the parent class become those that are common to the child class instance.

Class es and inheritance of lass in ES6

    // Parent Class
        class A {
            constructor(x) {
                this.x = x
                this.f = function () {
                    console.log('Ha-ha');
                }
            }
            a = "Zhang San"
            getX() {
                console.log(this.x);
            }
        }
        // Public Property
        A.prototype.a = "Li Si"
        let a = new A(100)
        console.log(a);//A {a: 111, x: 100, say: ƒ}

        // Subclass
        class B {
            constructor(y) {
                this.y = y
                A.call(this)//The constructor (class) declared by Class constructor A cannot be invoked without'new'class cannot be executed as a normal function
            }
            getY = function () {
                console.log(this.y);
            }
        }
        // Do not directly redirect subclass prototypes when using Class to construct classes
        console.log(B.prototype = new A(100));//A {a: 111, x: 100, say: ƒ}

ES6 has a new method for defining classes so that we don't have to create constructors manually

Features: 1. Parent private properties and methods become child private properties and methods 2. Parent public properties and methods become child public properties and methods

Tags: Javascript node.js

Posted on Fri, 01 Oct 2021 13:08:58 -0400 by ExpendableDecoy