The connection between JavaScript constructors and prototypes

1. Constructors and prototypes

1. Constructor

A constructor is a special function that is mainly used to initialize an object, that is, to assign initial values ​​to the object's member variables. It is always used with new . We can extract some common properties and methods from the object and encapsulate them into this function.
In JS,

When using the constructor, pay attention to the following two points:

• The constructor is used to create a certain type of object, and its first letter should be capitalized.
• Constructors only make sense when used with new .

new does four things when executed:

• Creates a new empty object in memory.
• Make this point to the new object.
• Execute the code in the constructor to add properties and methods to the new object.
• Return this new object (so no return is needed in the constructor).

Some members can be added to the JavaScript constructor, either on the constructor itself or on this inside the constructor. The members added in these two ways are called static members and instance members respectively.
Instance members: Object members created inside a constructor are called instance members and can only be accessed by instantiated objects.
Static members: Members added to the constructor are called static members and can only be accessed by the constructor itself.

For example:

 function A(uname,age){
            this.uname = uname;
            this.age = age;
            this.say = function() {
                console.log(this.uname+'hello');
            }
        }
        var wh = new A('王欢',18);
        var xl = new A('Little Bear',18);

In the above code, name , age , and say methods added through this in the constructor are all instance members. Can only be accessed by instantiated objects. The members added to the constructor itself are called static members.

For example: create a static member.

A.sex='female';

2. Constructor problem

The constructor method is very useful, but there is a problem of wasting memory

As shown below:

function Student(age,name){
            this.age = age;
            this.name = name;
            this.score = function(){
            console.log('The children all have good grades!');
        }
        }
        console.dir(Student);
        var xl = new Student(18,'Little Bear');
        var wh = new Student(17,'王欢');
        xl.score();
        wh.score();
       

Use the following code to determine whether the addresses of the two called methods are the same.

 console.log(xl.score === wh.score);

The print result is:

It can be seen that the addresses of the say function in A are not the same when it is called twice, because two memory spaces are opened up, resulting in a waste of memory.

3. Constructor prototype

Functions assigned by the constructor through the prototype are shared by all objects. JavaScript stipulates that every constructor has a prototype property that points to another object. Note that this prototype is an object, and all the properties and methods of this object will be owned by the constructor.

Create a constructor as follows:

function Student(age,name){
            this.age = age;
            this.name = name;
            this.score = function(){
                console.log('The children all have good grades!');
            }
        }
        console.dir(Student);

Print all the methods in the constructor, and you can see:

prototype object can be found.
You can define those unchanging methods directly on prototype object so that all instances of the object can share these methods.

function Student(age,name){
            this.age = age;
            this.name = name;
        }
        Student.prototype.score = function(){
            console.log('The children all have good grades!');
        }
        console.dir(Student);
        var xl = new Student(18,'Little Bear');
        var wh = new Student(17,'王欢');
        xl.score();
        wh.score();
        console.log(xl.score === wh.score);

The print result is:

And calling the function twice only opens up one memory space, which also reduces memory waste.

Note: In general, public properties are defined in the constructor and public methods are defined in the prototype object.

4. Object prototype __proto__

Every object has a property __proto__ pointing to the prototype object of the constructor function. The reason why our object can use the properties and methods of the constructor function prototype object is because the object has the __proto__ prototype.

As shown below:

function Student(age,name){
            this.age = age;
            this.name = name;
           
        }
 Student.prototype.score = function(){
     console.log('The children all have good grades!');
 }
// console.dir(Student);
 var xl = new Student(18,'Little Bear');
 var wh = new Student(17,'王欢');
 console.log(xl);

Check whether it has a __proto__ object prototype by the following code name

console.log(xl); //The system adds a __proto__ property to the object to point to the prototype object of the constructor

The output is:

Knowable existence.
In the above example, enter the following code to determine whether __proto__ object prototype and the prototype object prototype are equivalent.

 console.log(xl.__proto__ === Student.prototype);

The print result is: true
Therefore: __proto__ object prototype and prototype object prototype are equivalent

Call the score function through the instance object as follows:

xl.score();

The output is:

It can be called, and its method search rule is: first check whether there is a score method on the xl object. If so, execute score on this object. If there is no such method, because there is a __prooto__ attribute, search for it on the constructor function prototype object prototype .

The following diagram can be used to describe:

The significance of the __proto__ object prototype is to provide a direction, or a route, for the object's search mechanism, but it is a non-standard attribute, so in actual development, this attribute cannot be used. It only points to the prototype object prototype internally.

5. Constructor

According to the previous example, print the object prototype (__proto__) and constructor (xl) ( prototype ) prototype object of the instance object ( Student ) respectively.

console.log(Student.prototype);
console.log(xl.__proto__);

The print result is:

It can be seen that both the object prototype (__proto__) and the constructor function (prototype) have a property called constructor in the prototype object. We call the constructor function because it points back to the constructor function itself.

Then print the constroctor properties of the object prototype and the constructor prototype respectively. Observe its return value.

 console.log(Student.prototype.constructor);
 console.log(xl.__proto__.constructor);

The print result is:

It can be seen that they all point to the Student constructor.
That is, constructor is mainly used to record which constructor the object refers to, and it can allow the prototype object to point back to the original constructor.

Generally, the methods of an object are set in the prototype object of the constructor. When adding multiple methods to a constructor, you can use the object method.

As shown below:

 Student.prototype = {
            score: function(){
            console.log('The children all have good grades!')},
            study: function(){
            console.log('Study hard!');  
        }

When printing the consructor attribute of the modified prototype object:

It is found that the pointer of the prototype object has changed. This is because the prototype object is assigned in the form of an object, which will overwrite the original content of the constructor prototype object. In this way, the modified prototype object constructor no longer points to the current constructor.
At this point, we can add a constructor to the modified prototype object to point to the original constructor.

as follows:

Student.prototype = {
            constructor:Student,
            score: function(){
            console.log('The children all have good grades!')},
            study: function(){
            console.log('Study hard!');  
        }

Finally, the printed result is :

Success points back to the original constructor.

6. The relationship between constructor, instance and prototype object

According to the above example: the relationship between the constructor, instance, and prototype object can be described by the following diagram:

7. JavaScript member search mechanism (rules)

• When accessing an object's properties (including methods), first check whether the object itself has the property.
• If not, look for its prototype (that is, the prototype prototype object pointed to by __proto__).
• If not, look for the prototype of the prototype object (Object's prototype object).

And so on until Object is found (null).
The significance of the __proto__ object prototype is to provide a direction, or a route, for the object member search mechanism.

8. Extending built-in objects

You can use prototype objects to extend and customize the original built-in objects.
First, print the prototype object of the array to see which built-in objects are available.

 console.log(Array.prototype);

The print result is:

For example, now add a custom function to find the sum of even numbers in the array.

 Array.prototype.sum = function(){
            var sum = 0;
            for(var i=0;i<this.length;i++){
                sum += this[i];
            }
            return sum;
        }

To check whether the built-in object is successfully expanded, enter again:

console.log(Array.prototype);

The construction is successful. Give a specific instance object to determine whether it can be used normally:

var arr = [1,2,3];
        console.log(arr.sum());

The print result is:

2. The Nature of Class

• The essence of class is still function .
• All methods of a class are defined in prototype property of the class.
• The instance created by the class also has __proto__ pointing to the prototype object of the class
• Most of the functions of ES6 classes can be achieved by ES5. The new class writing method only makes the writing of object prototypes clearer and more like the syntax of object-oriented programming.

This is the end of this article about JavaScript constructors and prototypes. For more relevant JavaScript constructors and prototypes, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!