Deep understanding of JavaScript prototypes and closures (--this)

In the previous section, you should turn to the "execution context stack", but here you have to insert a section to say this. Because this is very important, JS face test if not a few with this, the question is not qualified.

In fact, the value of this, in four different cases. Let's take a look at it.

Again, one of the most important points of knowledge is that the value of this in the function is determined when the function is actually called and the function definition is not. Because the value of this is part of the execution context, each time a function is called, a new execution context is generated.

Scenario 1 : Constructors

The so-called constructor is the function that is used for the new object. In fact, strictly speaking, all functions can be new, but some functions are defined for new objects, while others are not. Also note that the function name of the constructor is capitalized (the rule Convention) in the first letter. For example: Object, Array, function, and so on.

In the above code, if the function is used as a constructor, then this represents the object it is about to be new.

Note that the above is only for the case of New Foo (), which is the case of the Foo function as a constructor. If you call the Foo function directly, instead of the new Foo (), the situation is very different.

In this case this is the window, as we will say later in this article.

Scenario 2 : Function as a property of an object

If the function is a property of an object and is called as a property of an object, this point in the function points to the object.

In the above code, FN is not only a property of an object, but is indeed called as a property of an object. The result is the Obj object.

Note that if the FN function is not called as an attribute of obj, what will be the result?

As the code above, if the FN function is assigned to another variable and is not called as an attribute of obj, then the value of this is window,this.x to undefined.

Scenario 3 : function with call or Apply called

When a function is called by call and apply, the value of this takes the value of the passed-in object. As for call and apply how to use, no friend can go to check other materials, this series of tutorials do not explain.

Scenario 4 : Global & Calling normal functions

In the global environment, this is always window, this should not be criticized.

When the normal function is called, this is also the window.

The above code is well understood.

But here's what you need to look at:

The function f is defined inside the OBJ.FN, but it is still a normal function, and this still points to the window.

Finished.

See, this is a lot of knowledge points, not only more but also very important.

Finally, since the mention of this, it is necessary to introduce a very classic case to everyone, but also the jquery source code.

The code above is part of the code removed from jquery. Both Jquery.extend and JQuery.fn.extend point to the same function, but when executed, the this in the function is not the same.

Execute Jquery.extend (...) This points to jquery; execution JQuery.fn.extend (...) , this points to Jquery.fn.

This is a clever way to share a piece of code at the same time for two functions, more in line with design principles.

All right, we're done. Then the previous section goes on to say "execution context stack".

Note: There is also part of this content that is not mentioned in this article and has been added here: http://www.cnblogs.com/wangfupeng1988/p/3996037.html

---------------------------------------------------------------------------

This article has been updated to the directory of in-depth understanding of JavaScript prototypes and closures, and more on the in-depth understanding of JavaScript prototypes and closures series.

Also, please pay attention to my Weibo.

Also welcome to follow my other tutorials:

Deep understanding of JavaScript prototypes and closures (--this)