Understanding prototype in javascript and this in javascript

Understanding prototype in javascript and this in javascript

I have never been very familiar with prototype in javascript. Today, after reading javascript advanced programming, I finally understood prototype. To briefly summarize the content learned from the book.

We all know that after a function is created, this function has a property like prototype. We can do a lot of things with this prototype, one thing we often use is to use it as a constructor. Therefore, this article describes prototype from the perspective of function as a constructor.

In fact, constructor in javascript is no different from other functions, but the calling method is slightly different. Next let's look at the code.

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

We declare a simple function called Dog. If we just call this method, she will only add a name attribute for the global object. No object is generated.

But when we call this method as a constructor, the situation will be different. This function will return an object.

Var d = Dog (); console. log (d) // undefined // as the constructor call var dog = new Dog (); console. log (dog) // dog object.

This is the method for generating objects in javascript. I believe everyone should understand it. Next we will explain in detail what role prototype plays in this constructor.

At the beginning of this article, we have already mentioned that this function has a prototype attribute when declaring constructor. On the chrome console, enter the code to view such a result.

<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, in javascript, The Erumerable attribute of this attribute is set to false, so we cannot see it here, but we can still access this attribute. See the following results:

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

If we see the result, do we find something? The output structure is the self-defined constructor. So what is the relationship between them? We can use the equal operator to compare them.

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

We can see that the two results are actually equal.

So, can we use constructor to access and ask about prototype? Yes, this is all right. In this way, it is equivalent to forming a circular pointing link. In fact, this can also be verified by recursion, stack Overflow will soon be called when calling recursion, because there is no exit in this recursive call.

The above relationship can be expressed in the following figure.

Well, we have briefly introduced prototype in the constructor, so let's take a look at prototype in the object. In javascript, the declared object does not have the prototype attribute, instead, use _ proto _ (note :__ is two _) to access prototype. What is the relationship between _ proto _ in the object and prototype in the constructor?

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

The result shows that the _ proto _ of all objects in the same class are equal, because they all point to the prototype of the constructor.

Now that we have finished reading the constructor and prototype of the object, let's take a look at the prototype object itself. We have mentioned that prototype is actually an object. Since it is an object, we can extend this object. Next we will add a method and attribute for this object.

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

Let's take a look at the defined dog object. Does it also have this method and attribute.

dog.day() ;// 'wangwang'dog.color ;// 'black';

We found through calling that this object also has a method and attribute, but we did not directly add methods and attributes to the object. This shows that, attributes and methods in prototype are also shared with objects.

Here, sharing is obtained through searching. When we access an object's attributes, this object will first find this attribute in its own attribute set. If it is found, if no result is found, it is directly returned. If no result is found, it is found in the prototype attribute set. In this example, when we access attributes and methods, we first find them in the dog object, and then find the prototype attributes and methods.

Since these methods and attributes are shared, what will happen when we modify these methods and attributes?

         var dog2 = new Dog();         dog.color  = "red";         console.log(dog2.color);  //black

The result shows that the color attribute of dog2 is not affected because prototype is not actually operated when the object is used to operate the prototype attribute, instead, you create a new color attribute and assign the red value to the color attribute. Therefore, prototype is not affected here. This does not affect dog2. (You can verify by yourself that color exists as the property of the dog object ).

Similarly, we can see that after we modify the method, the method in prototype has not been affected.

This is a simple description of prototype. If there is any misplacement in this article, I hope you can correct it.

The article is original. For more information, see