Will JS and JQ back-end development how happy to turn the front-end: Part II – Section III: ES6 – object-oriented end – inheritance

Time:2021-4-18

Chapter 2 – Section 2: ES6 object oriented inheritance

ES6 didn’t give us extensions inheritance before. We can implement inheritance through constructor + prototype object simulation, which is called composite inheritance.

Call method. You must know how to use it before inheritance

  1. Call () can call the function

fn.call();

  1. Call () can change this point of the function, and this point of the function points to the O object

code

<body>

    <script>

        //Call method

        function fn(x, y) {

            console.log ('I'd like some hand ground coffee ');

            console.log(this);

            console.log(x + y);

        }

        var o = {

            name: 'andy'

        };


        fn.call(o, 1, 2);

    </script>

</body>

Running results
Will JS and JQ back-end development how happy to turn the front-end: Part II - Section III: ES6 - object-oriented end - inheritance

Inheriting properties by borrowing the parent constructor

  1. Parent constructor
function Father(uname, age) {

            //This points to the object instance of the parent constructor

            this.uname = uname;

            this.age = age;

        }

2. Sub constructor

function Son(uname, age, score) {
    //This points to the object instance of the child constructor
    Father.call(this, uname, age);
    this.score = score;
}

Here, this points to son. I point the attribute of father to son.

Then son can use the uname and age attributes of father

This is the parameter passed to the parent class by its own uname age

Full text code:

<body>

    <script>

        //Inheriting properties by borrowing the parent constructor

        //1. Parent constructor

        function Father(uname, age) {

            //This points to the object instance of the parent constructor

            this.uname = uname;

            this.age = age;

        }

        //2. Sub constructor 

        function Son(uname, age, score) {

            //This points to the object instance of the child constructor

            //Here, this points to son. I point the attribute of father to son.

            //Then son can use the uname and age attributes of father

            //This is the parameter passed to the parent class by its own uname age

            Father.call(this, uname, age);

            this.score = score;

        }

        Var son = new son ('Big power ', 18, 100);

        console.log(son);

    </script>

</body>

Running results

Will JS and JQ back-end development how happy to turn the front-end: Part II - Section III: ES6 - object-oriented end - inheritance

Borrowing prototype object inheritance method

It’s still the code above.
Let’s write a new public method money for the prototype object

Father.prototype.money = function() {

    console.log(100000);

};

So here’s the problem. Go ahead console.log () call.
The results are as follows

Will JS and JQ back-end development how happy to turn the front-end: Part II - Section III: ES6 - object-oriented end - inheritance

We find that there is no money ()

This is because your money is not inside the father function. So it was not inherited.

So how to inherit?

  1. Direct assignment. This can be done, but there will be problems with direct assignment. If the child prototype object is modified, the parent prototype object will also change
  2. Borrowing prototype objects. The whole one is public and then reused to achieve the effect of inheritance.

Using prototype object to implement code

<body>
    <script>
        //Inheriting properties by borrowing the parent constructor
        //1. Parent constructor
        function Father(uname, age) {
            //This points to the object instance of the parent constructor
            this.uname = uname;
            this.age = age;
        }
        Father.prototype.money = function() {
            console.log(100000);

        };
        //2. Sub constructor 
        function Son(uname, age, score) {
            //This points to the object instance of the child constructor
            Father.call(this, uname, age);
            this.score = score;
        }
        //  Son.prototype  =  Father.prototype If you modify the child prototype object, the parent prototype object will change with it
        Son.prototype = new Father();
        //If you modify the prototype object in the form of an object, don't forget to use the constructor to refer back to the original constructor
        Son.prototype.constructor = Son;
        //This is a special method for sub constructors
        Son.prototype.exam = function() {
            console.log ('the child wants to take an exam ');

        }
        Var son = new son ('Big power ', 18, 100);
        console.log(son);
        console.log(Father.prototype);
        console.log(Son.prototype.constructor);
    </script>
</body>

Screenshot:

Will JS and JQ back-end development how happy to turn the front-end: Part II - Section III: ES6 - object-oriented end - inheritance

Will JS and JQ back-end development how happy to turn the front-end: Part II - Section III: ES6 - object-oriented end - inheritance

This work adoptsCC agreementReprint must indicate the author and the link of this article

Thank you for your attention

Recommended Today

Review of SQL Sever basic command

catalogue preface Installation of virtual machine Commands and operations Basic command syntax Case sensitive SQL keyword and function name Column and Index Names alias Too long to see? Space Database connection Connection of SSMS Connection of command line Database operation establish delete constraint integrity constraint Common constraints NOT NULL UNIQUE PRIMARY KEY FOREIGN KEY DEFAULT […]