Understand the prototype in JavaScript

Prototype in JavaScript has not been very understanding, today after reading the "Advanced JavaScript Programming" finally understand the prototype. To simply summarize what you learned from the book.

We all know that after creating a function, this function has a property like prototype, and with this prototype we can do a lot of things, the one thing we often use is to use it as a constructor, so This paper explains prototype from the perspective of function as a constructor.

In fact, the constructors in JavaScript are no different from the other functions, just the slightly different ways of calling them. Here's a look at the code.

            function Dog () {              this.name = "Ben";           }

we declare a simple function called dog, and if we simply call this method, she will only add a name attribute to the global object. does not generate objects.

But when we call this method as a constructor, the situation is different, and the function returns an object.

var d = Dog (); Console.log (d)//undefined            //As a constructor call        var dog = new Dog ();        Console.log (dog)//Dog object.

This is the way the object is generated in JavaScript, and I believe we should all understand that the following is a detailed explanation of what this prototype does in this constructor.

At the beginning of the article, it has been said that when declaring the constructor, the function has prototype such a property. In Chrome's console, enter the code to see a result like this.

<span style= "FONT-SIZE:18PX;" >          console.log (dog.prototype);//dog {} </span>

In fact, the prototype of the function points to an object, called a prototype object, which contains a property called constructor, but why can't we see it in the output object, which is in JavaScript, The Erumerable property of this property is set to False, so we can't see it here, but we can still access this property. Look at the following results:

          Console.log (Dog.prototype.constructor);         function Dog () {         //     this.name = "Ben";         //  

What is the relationship between seeing the result, finding out what the output is, and the structure we define ourselves? We can use the equality operator to compare.

       Console.log (Dog.prototype.constructor = = = Dog);//true

We can see the results, these two are actually done equal.

So, can we use constructor to visit prototype? Yes, this is perfectly possible, so, here is the equivalent of forming a circular-pointing relationship, this can actually be used recursively to verify that the call recursion will quickly call the stack overflow, because there is no exit in this recursive call.

The above relationship, we can simply use the following diagram to express

OK, so we've simply introduced the prototype in the constructor, so let's take a look at the prototype in the object, in JavaScript, the Declaration object does not prototype this property, but instead uses __proto__ ( Note: __ is two _) to access prototype, so what is the relationship between the __proto__ in the object and the prototype in the constructor?

           dog.__proto__ = = = Dog.prototype;//true

As a result, we can see that the __proto__ of all objects of the same class are equal because they actually point to the prototype of the constructor.

Now that we've seen the prototype of constructors and objects, let's look at the prototype object itself, as we've already mentioned, prototype is actually an object, and since he's an object, we can extend this object, Here we add a method and a property for this object.

Dog.prototype.say = function () {console.log (' Wangwang ');} Dog.prototype.color = "BLACK";

Let's take a look at the dog object that you just defined, and whether you have this method or property.  

Dog.day ();//' Wangwang ' dog.color;//' black ';

We find that this object has a method and a property on it, but we don't add methods and properties directly to the object, which means that the properties and methods in prototype are also shared for the object.

Sharing here is obtained by finding, when we access the properties of an object, the object first in its own set of properties to find this property, if found, then directly return, if not found will go to prototype property set inside to find. In this example, when we access the properties and methods, we first find in the dog object, we can not find the properties and methods to find the prototype.

Now that these methods and properties are shared, what are the results of modifying these methods and properties?

         var dog2 = new Dog ();         Dog.color  = "Red";         Console.log (Dog2.color);  Black

As you can see from the results, the color property of DOG2 is not affected, because when the object is used to manipulate the properties of prototype, there is no real action prototype, but a new color property, and red is assigned to color. So this does not affect the prototype. It will not affect the dog2. (The reader can verify for himself that color is present as a property of the dog object.)

Similarly, we can see that when we modify the method, the method in prototype does not receive any effect.

Here is a brief description of prototype. If there is dislocation in the text also hope that the big God to correct you.

article is original, reproduced please specify

Understand the prototype in JavaScript