Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the connection between the JavaScript constructor and the prototype". In the daily operation, I believe that many people have doubts about the connection between the JavaScript constructor and the prototype. The editor consulted all kinds of materials and sorted out a simple and useful method of operation. I hope it will be helpful to answer the question of "what is the connection between the JavaScript constructor and the prototype?" Next, please follow the editor to study!

Constructors and prototypes 1. Constructors

Constructor is a special function that is mainly used to initialize objects, that is, to assign initial values to object member variables, which is always used with new. We can extract some common properties and methods from the object and encapsulate them into this function.

In JS

Note the following two points when using a constructor:

The constructor is used to create a class of objects with uppercase initials.

The constructor makes sense only if it is used with new.

New does four things when it executes:

Create a new empty object in memory.

Let this point to this new object.

Execute the code in the constructor to add properties and methods to the new object.

Return this new object (so you don't need return in the constructor).

Members can be added to the constructor of JavaScript, either on the constructor itself or on the this inside the constructor. Members that are added in these two ways are called static members and instance members, respectively.

Instance members: object members created inside the constructor are called instance members and can only be accessed by instantiated objects.

Static members: members added to the constructor book 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 ('Wang Huan', 18); var xl = new A ('Little Bear', 18)

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

For example, create a static member.

A. sexuality 'female'; 2. The problem of constructor

The constructor method is easy to use, but there is a problem of wasting memory

As follows:

Function Student (age,name) {this.age = age; this.name = name; this.score = function () {console.log ('the kids are getting good grades!') ;} console.dir (Student); var xl = new Student (18Bear); var wh = new Student (17Med 'Wang Huan'); xl.score (); wh.score ()

Use the following code to determine whether the two called methods have the same address.

Console.log (xl.score = wh.score)

The print result is as follows:

It is known that the address of the say function inside An is not the same twice, because two memory spaces are opened up, resulting in a waste of memory.

3. Constructor prototype prototype

The functions assigned by the constructor through the prototype are shared by all objects. JavaScript states that each constructor has a prototype property that points to another object. Note that the prototype is an object whose properties and methods are 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 kids are getting good grades!') ;}} console.dir (Student)

To print all the methods in the constructor, you can see:

The prototype object can be found.

You can define those immutable methods directly on the 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 kids are getting good grades!') ;} console.dir (Student); var xl = new Student (18Mei 'Little Bear'); var wh = new Student (17J 'Wang Huan'); xl.score (); wh.score (); console.log (xl.score = wh.score)

The print result is as follows:

And two calls to the function only open up a memory space, but also reduce the waste of memory.

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

4. Object prototype _ _ proto__

All objects have a property _ _ proto__ that points to the prototype prototype object of the constructor. The reason why our object can use the properties and methods of the constructor prototype prototype object is because the object has a _ _ proto__ prototype.

As follows:

Function Student (age,name) {this.age = age; this.name = name;} Student.prototype.score = function () {console.log ('the kids are getting good grades!') ;} / / console.dir (Student); var xl = new Student (18 miner 'Little Bear'); var wh = new Student (17 miner 'Wang Huan'); console.log (xl)

See if it has a _ _ proto__ object prototype by the following code name

Console.log (xl); / / the system itself adds a _ _ proto__ attribute to the prototype object of the constructor.

The output is as follows:

You know it exists.

Enter the following code in the above example to determine whether the _ _ proto__ object prototype is equivalent to the prototype object prototype.

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 shown below:

Xl.score ()

The output is as follows:

Can be called, the method search rule is: first check whether there is a score method on the xl object, if so, execute the score on this object. If there is no such method, because of the existence of the _ _ prooto__ attribute, go to the constructor prototype object prototype to find it.

The following figure can be used to describe:

The meaning of the _ _ proto__ object prototype is to provide a direction, or a route, for the object lookup mechanism, but it is a non-standard attribute, so this property cannot be used in actual development, it only points internally to the prototype object prototype.

5. Constructor constructor

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

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

The print result is as follows:

You know: both the object prototype (_ _ proto__) and the constructor (prototype) prototype object have a property constructor property, which we call the constructor because it refers to the constructor itself.

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

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

The print result is as follows:

You can see that they all point to the Student constructor.

That is, constructor is mainly used to record which constructor the object is referenced to, and it can redirect the prototype object to the original constructor.

In general, the methods of the object are set in the prototype object of the constructor. When you add multiple methods to a constructor, you can use the object approach

As follows:

Student.prototype = {score: function () {console.log ('the kids are getting good grades!') }, study: function () {console.log ('study hard!') ;}

When printing the consructor property of the modified prototype object:

It is found that the direction of the prototype object changes because the prototype object is assigned in the form of an object, which overrides the original content of the constructor prototype object, so that 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 kids are getting good grades!') }, study: function () {console.log ('study hard!') ;}

Finally, the printed result is:

Success refers to the original constructor.

6. The relationship among constructor, instance and prototype object.

According to the above example: the relationship among constructors, instances, and prototype objects can be described in the following figure:

7. JavaScript member search mechanism (rules)

When accessing the properties of an object (including methods), first find out whether the object itself has the property.

If not, look for its prototype (that is, the prototype prototype object pointed to by _ _ proto__).

If you don't already have one, find the prototype of the prototype object (the prototype object of Object).

And so on until Object is found (null).

The meaning of the _ _ proto__ object prototype is to provide a direction, or route, for the object member lookup mechanism.

8. Extend built-in objects

You can extend and customize the original built-in object through the prototype object.

First print the prototype objects of the array to see which built-in objects are available.

Console.log (Array.prototype)

The print result is as follows:

For example, now add the function of custom courtship sum to the array.

Array.prototype.sum = function () {var sum = 0; for (var item0)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.