Will JS and JQ back-end development, how happy to turn the front-end: Part II – Section II: ES6 – object-oriented – play OOP flower – Prototype

Time:2021-4-15

Prototype of constructor

  • Disadvantages of constructors

  • Prototype of constructor

  • Prototype and the role of prototype

Disadvantages of constructors

Waste of memory

The disadvantage of constructor is that it wastes memory.

Prototype: each constructor has a prototype property that points to another object. This prototype is an object. All the properties and methods of this object will be owned by the constructor.

The role of prototype: resource sharing.

Why waste memory?

Write a constructor to create a student object

Attribute: name age height weight

Behavior: learn to eat and watch movies

function Student (name){

    this . name = name ;

    this . study = function (){

        Console. Log ("study hard and make progress every day");

    }

}

If the constructor has no parameters, the parentheses can be omitted when calling

Var stu = new student ("Hu Yitian");

    stu. study () ;

    Var stu1 = new student ("Shen Yue");

    stu1. study () ;

The actual situation of the above two objects is as follows:

Will JS and JQ back-end development, how happy to turn the front-end: Part II - Section II: ES6 - object-oriented - play OOP flower - Prototype

Each student’s code in the same function does not occupy the same memory.
So the traditional solution is to letAll objects share one method, define the function outside the constructor, and assign the function to the method inside the constructor.

There are some problems in using this method
1 is the pollution caused by the increase of global variables,
2. The code structure is chaotic and difficult to maintain

Prototype of constructor

Prototype definition

Prototype: each constructor has a prototype property that points to another object. This prototype is an object. All the properties and methods of this object will be owned by the constructor.

Role: resource sharing

In general, our public properties are defined into constructors, and our public methods are put into prototype objects

code:

<body>

    <script>

        //1. The problem of constructor 

        function Star(uname, age) {

            this.uname = uname;

            this.age = age;

            // this.sing = function() {

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

            // }

        }

        Star.prototype.sing = function() {

            console.log ('I can sing ');

        }

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

        Var Bo = new star ('bobo ', 19);

        console.log ( dmm.sing  ===  bo.sing ); // if it is not a public method, this is false

        // console.dir(Star);

        dmm.sing();

        bo.sing();

        //2. In general, our public properties are defined into constructors, and our public methods are put into prototype objects

    </script>

</body>

The method of object prototype

protoMy own object prototype

Object. The system adds one of its own__proto__Point to the prototype object of our constructorprototype

<body>

    <script>

        function Star(uname, age) {

            this.uname = uname;

            this.age = age;

        }

        Star.prototype.sing = function() {

            console.log ('I can sing ');

        }

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

        Var Bo = new star ('bobo ', 19);

        dmm.sing();

        console.log (DMM); // the system adds one on the object itself__ proto__  Point to the prototype object prototype of our constructor

        console.log(dmm.__proto__ === Star.prototype);

        //Method search rules: first, check whether there is a sing method on the DMM object, and if so, execute the sing method on the object

        //If there is no such method as sing, because there is__ proto__  For the existence of, go to the constructor prototype object prototype to find the method of sing

    </script>

</body>

Property constructor returns the original constructor

In many cases, we need to use it manuallyconstructorThis property refers back to the original constructor

Why point back?

Application scenario: write two object prototype methods
Thinking: can I simply optimize the code?

Star.prototype.sing = function() {
    console.log ('I can sing ');
};
Star.prototype.movie = function() {
    console.log ('I'll be in a movie ');
}

Start optimization, merge prototype, modify prototype

<body>
    <script>
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        //2. Define a new prototype directly
        //The constructor property refers back to the original constructor
        Star.prototype = {
            //If we modify the original prototype object and assign an object to the prototype object, we must manually use the constructor to point back the original constructor
            //If you don't point back and comment on this line, you can't find the original constructor 
            //Printing Star.prototype.constructor  dmm.__ proto__ . constructor has only sing and movie in this constructor
            //In many cases, we need to manually use the constructor attribute to refer back to the original constructor
            constructor: Star, 
            sing: function() {
                console.log ('lifetime ');
            },
            movie: function() {
                console.log ('php ah ');
            }
        }
        Var DMM = new star ('Big power ', 18);
        Var Bo = new star ('bobo ', 19);
        console.log(Star.prototype);
        console.log(dmm.__proto__);
        console.log(Star.prototype.constructor);
        console.log(dmm.__proto__.constructor);
    </script>
</body>

If it doesn’t point to the prototype, print it as shown in the figure: (comment out the point directly)

Will JS and JQ back-end development, how happy to turn the front-end: Part II - Section II: ES6 - object-oriented - play OOP flower - Prototype

Pointing to the prototype:

Will JS and JQ back-end development, how happy to turn the front-end: Part II - Section II: ES6 - object-oriented - play OOP flower - Prototype

Prototype chain

  1. As long as it’s the object, it’s the object__proto__Prototype, pointing to prototype object
  2. WeStarIn the prototype object__proto__The archetype points toObject.prototype
  3. WeObject.prototypeIn the prototype object__proto__The archetype points tonull
<body>

    <script>

        function Star(uname, age) {

            this.uname = uname;

            this.age = age;

        }

        Star.prototype.sing = function() {

            console.log ('I can sing ');

        }

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

        //1. As long as it is an object__ proto__  Prototype, pointing to prototype object

        console.log(Star.prototype);

        console.log(Star.prototype.__proto__ === Object.prototype);

        //2. In our star prototype object__ proto__ The archetype points to Object.prototype

        console.log(Object.prototype.__proto__);

        //3. We Object.prototype In the prototype object__ proto__ The prototype point is null

    </script>

</body>

This point in prototype object

In the constructor, this points to the object instance
This in the prototype object function refers to the instance object

<body>
    <script>
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        var that;
        Star.prototype.sing = function() {
            console.log ('I can sing ');
            That = this; // refers to the instance object DMM
        }
        Var DMM = new star ('Big power ', 18);
        //1. In the constructor, this refers to the object instance DMM
        dmm.sing();
        console.log(that === dmm);

        //2. This in the prototype object function refers to the instance object DMM
    </script>
</body>

result:

Will JS and JQ back-end development, how happy to turn the front-end: Part II - Section II: ES6 - object-oriented - play OOP flower - Prototype

true

Application extension method of prototype object

You can extend and customize the original built-in objects through prototype objects. For example, add the function of custom even sum to the array.

Note: array and string built-in objects cannot override operations on prototype objectsArray.prototype ={}It can only beArray.prototype.xx = function AddIt’s the same way.

<body>
    <script>
        //Application extension method of prototype object

        Array.prototype.sum = function() {
            var sum = 0;
            for (var i = 0; i < this.length; i++) {
                sum += this[i];
            }
            return sum;
        };
        //This section will directly report an error. JS itself has sum. We still need this method. It is impossible to override it.
        //We can only extend the built-in object method in the form of notification appending
        // Array.prototype = {
        //     sum: function() {
        //         var sum = 0;
        //         for (var i = 0; i < this.length; i++) {
        //             sum += this[i];
        //         }
        //         return sum;
        //     }

        // }
        var arr = [1, 2, 3];
        console.log(arr.sum());
        console.log(Array.prototype);
        var arr1 = new Array(11, 22, 33);
        console.log(arr1.sum());
    </script>
</body>

Execution screenshot:

Will JS and JQ back-end development, how happy to turn the front-end: Part II - Section II: ES6 - object-oriented - play OOP flower - Prototype

Add comments in the form of sum above

<body>

    <script>

        //Application extension method of prototype object

        // Array.prototype.sum = function() {

        //     var sum = 0;

        //     for (var i = 0; i < this.length; i++) {

        //         sum += this[i];

        //     }

        //     return sum;

        // };

        Array.prototype = {

            sum: function() {

                var sum = 0;

                for (var i = 0; i < this.length; i++) {

                    sum += this[i];

                }

                return sum;

            }

        }

        var arr = [1, 2, 3];

        console.log(arr.sum());

        console.log(Array.prototype);

        var arr1 = new Array(11, 22, 33);

        console.log(arr1.sum());

    </script>

</body>

Implementation results:

Will JS and JQ back-end development, how happy to turn the front-end: Part II - Section II: ES6 - object-oriented - play OOP flower - Prototype

Array and string built-in objects cannot override operations on prototype objectsArray.prototype ={}It can only beArray.prototype.xx = function AddIt’s the same way.

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