JavaScript things-the easy way to get lost

In the previous post, "JavaScript those things-big bad on the closure," The master of the closure is outlined, of course, closures this thing understand there is a process, perhaps in an instant, some turn suddenly realized, a kind of "imaginative achievement here inexpressible" feeling, the Lord is born dull, Also in this understanding of the road, do not dare to say how good they write, but the understanding of their own to say, there is not good to ask Bo friends to correct! The Lord is all ears.

Order

In our development of the actual project on the role of this is great, it is also more flexible to increase the fun of programming, in this case to use this scenario one by one overview, in fact, in the first contact with JavaScript, always feel it is quite mysterious, Only through the project of large and small summed up this is not so mysterious in legend, this article will step by step to unravel its mysterious veil (very high-level said).

Example 1:

function fn () {    console.log (this);} FN ();

May I ask this code to execute, who is this? Answer: Window.

Example 2:

var obj = {    fn:function () {        console.log (this);}    } Obj.fn ();

May I ask this code to execute, who is this? Answer: obj.

Example 3:

var odiv = document.getElementById (' div '); odiv.onclick = function () {    console.log (this);};

When clicking on the element with ID Div, who is this? Answer: Odiv.

Example 4:

;(function () {    console.log (this);}) ();

When this self-executing function executes, who is this? Answer: Window.

Why can a glance out this is who, in fact, there is a trick, its trick is: the function of the main body of execution, then this is who . This is a very advanced sentence, so I'll make it more popular, it follows the function call: see if it has a bit (".") before the call statement. ), if a little ("." Then this is just a little (".") ) before something, if not a bit ("." Then this is window, which is the first theory ; for event binding, this is the DOM element that is bound when the event is triggered, which is the second theory . As long as the stubborn to follow these two theories, then this question traveled all over the world is not afraid of (reading popular This sentence: Learn physics everywhere in the world are not afraid), in fact, these two theories, today's blog can be ended, but very few people follow it, because the temptation of reality too much, It is tempting you to let you do not follow the two theory, it is like every day received a variety of phone calls you need not to handle XX insurance, XX financial, XX free collection ... is to tempt you, its essence is to cheat you money.

(Research this is a long time also did not understand, but was a master easy to solve)

Let's analyze the above 4 examples, because the important ideas of the two theories have been put forward (I have a TM to go with the party's two theories of the three representatives), do not draw one by one:
For Example 1: the 4th line of code is its invocation statement, and we find that it's not a bit (".") before the call statement. ), according to the first theory, this is window;
For Example 2: the 6th line of code is its invocation statement, and we find it a bit (".") before the call statement. According to the first theory, this is a bit (".") ) in front of the thing, therefore this is obj;
For Example 3: from the 2nd to 4th line of code, we bind an anonymous function to Odiv, the DOM element event property onclick, and when the event fires, the anonymous function executes, and this is the DOM element that binds the Odiv, Obviously follow the second theory;
For Example 4: This is a self-executing function that does not have a bit of execution ("."). ), according to the first theory, this is window. (In fact, for this self-executing function this is the window, this is slightly special)

The Common pit child

The first pit child:

function fn2 () {    console.log (this);}    function fn () {    fn2 ();    Console.log (this);} FN ();

Ask Fn2 is called at execution time this is who? FN is called at execution time who is this? Then I tell you: Fn2 is called to execute when this is WINDOW,FN is called to execute when this is also window. Obviously all are based on the theory of one, the conclusion is that the reason: Call the statement before there is no bit ("." ), apparently none, that is, window. If you still do not understand, please carefully weigh the red mark.

Second Pit Child:

var odiv = document.getElementById (' div '); Odiv.onclick = (function () {    console.log (this);    return function () {        console.log (this);}    ;}) ();

Ask the self-executing function ((function () {...}) ()) who is this? Who is this when the element whose ID is div is clicked (actually the small function that executes)? Let us analyze: when this self-executing function is called to execute, this is the window, which is mentioned in example 4 , so this is the window when the execution function is called. I'm going to go back to the fact that when our code executes from top to bottom (not after clicking on the element with the ID div), the self-executing function is executed, and the value it executes is the small function inside it (function () {console.log (this);} If you have questions, here's a picture of the truth:

We know that the value of the event attribute (onclick) of this element with ID div is this small function, and according to the second theory we know that this is odiv. In fact, careful you will find, when you click on the ID of the div d element, is not the equivalent of Odiv.onclick (), according to the first theory, the call statement before a bit ("." ), a little ("." Then this is just a little (".") The front of the thing, it is also odiv. Careful you are not also found it!

Summarize

This post is ready to write a few more pits, but considering the knowledge of the back pit is relatively strong, of course, for the great God please disregard, such as function in call and apply, JavaScript data type comparison between the concerns, of course, this knowledge of the master in the following article will be outlined , please pay attention! Please correct me in case of doubt or wrong. Thank you again for your support!

JavaScript things-the easy way to get lost