How to turn the back-end development of JS and JQ to the front-end happily

Time:2021-4-17

brief introduction

Inheritance instantiation super, this, that

Class and basic function

  1. Create class

  2. Class to receive parameters in construct

  3. Class function directly write dosomthing() {/ / logic}

  4. There is no need to add a comma between multiple function methods

code:

<script>

        //1. Create class create a star class

        class Star {

            //The common properties of the class are put into the constructor

            constructor(uname, age) {

                this.uname = uname;

                this.age = age;

            }

            sing(song) {

                //  console.log ('I sing ');

                console.log(this.uname + song);

            }

        }

        //2. Using class to create object new

        Var DMM = new star ('Big power ', 18);

        Var BG = new star ('bogo ', 20);

        console.log(dmm);

        console.log(bg);

        //(1) all functions in our class do not need to write function 

        //(2) There is no need to add a comma between multiple function methods

        dmm.sing ('the support of love ');

        bg.sing ('devotion to the country ');

    </script>

inherit

  1. Super keyword calls the parent function

Call construction

class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);

            }
        }
        class Son extends Father {
            constructor(x, y) {
                Super (x, y); // the constructor in the parent class is called
            }
        }

Call ordinary function super. Function name

//Super keyword calls a generic function of the parent class
        class Father {
            say() {
                Return 'I'm dad';
            }
        }
        class Son extends Father {
            say() {
                //  console.log ('I am a son ');
                console.log ( super.say () + 'son of');
                //  super.say () is to call the ordinary function say ()
            }
        }
        var son = new Son();
        son.say();

The subclass inherits the method a of the parent class, and then extends the parent class to write a new method B.

<script>
        //The superclass has addition methods
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        //Subclass inherits addition method of parent class and extends subtraction method at the same time
        class Son extends Father {
            constructor(x, y) {
                //Using super to call the constructor of parent class
                // super must be called before subclass this.
                //At this time, we can already use the sun method of the parent class. The next code is only written to extend subtraction
                super(x, y); 
                this.x = x;
                this.y = y;

            }
            subtract() {
                console.log(this.x - this.y);

            }
        }
        var son = new Son(5, 3);
        son.subtract();
        son.sum();
    </script>

Notes on using class

1. There is no variable promotion in ES6, so you must define a class before you can instantiate an object through a class

2. The common properties and methods in the class must be used with this

3. This in the constructor refers to the instance object created

4. This in the method refers to who calls the method itself, because it calls.
5. Next to the above, corresponding to this, then this in the constructor is stored in that

Code demonstration

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    < button > Click < / button >

    <script>

        var that;

        var _that;

        class Star {

            constructor(uname, age) {

                //This in the constructor refers to the instance object created

                that = this;

                console.log(this);

                this.uname = uname;

                this.age = age;

                // this.sing();

                this.btn = document.querySelector('button');

                this.btn.onclick = this.sing;

            }

            sing() {

                //This in the sing method points to the BTN button, because the button calls this function

                console.log(this);

                console.log ( that.uname ); // this in the constructor is stored in that

            }

            dance() {

                //This in dance refers to the instance object DMM, because DMM calls this function

                _that = this;

                console.log(this);

            }

        }

        Var DMM = new star ('Big power ');

        console.log(that === dmm);

        dmm.dance();

        console.log(_that === dmm);

        //1. There is no variable promotion in ES6, so you must define a class before you can instantiate an object through a class

        //2. The common properties and methods in the class must be used with this

    </script>

</body>

</html

Implementation effect

How to turn the back-end development of JS and JQ to the front-end happily

After clicking the button:

How to turn the back-end development of JS and JQ to the front-end happily

reflection

  1. Which keyword is used to create the class_____

  2. How does a subclass inherit a parent keyword____

  3. Calling the constructor in the parent class is the same as the normal function keyword____

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 […]