Flexible understanding of this point in JavaScript _javascript tips

This is one of the key words in JavaScript and is often used when writing programs, and it is especially important to understand and use the keyword correctly. The first thing you have to say is that this point is not certain when the function is defined, only when the function is executing to determine who it is pointing to, and actually this is ultimately pointing to the object that called it (there are some questions that explain why there is a problem, Although most of the articles on the web are said, although in many cases to understand that there will be no problem, but in fact that the understanding is not accurate, so when you understand this will have a kind of unpredictable feeling, then I will delve into this problem.

Why do you want to learn this? If you have learned functional programming, object-oriented programming, you must know what to use, if you have not learned, then temporarily can not see this article, of course, if you are interested can also see, after all, this is JS must have to master things.

Example 1:

function A () {
var user = "Dream child";
Console.log (This.user); Undefined
console.log (this);//window
}

As we said above, this ultimately points to the object that called it, where function A is actually lit by the window object, and the following code can prove it.

function A () {
var user = "Dream child";
Console.log (This.user);　　Undefined
console.log (this); Window
}

Like the code above, alert is also an attribute of window, which is also a window point.

Example 2:

var o = {
User: "Dream child",
fn:function () {
console.log (this.user);//Chasing Dream Child
}
}

Here's this point to object o, since you invoke this FN through O.fn (), the natural point is Object o, and here again, this point is not to be determined when the function is created, to decide when the call is made, to whom the call is directed, and to make sure of it.

In fact, examples 1 and 2 are not accurate enough, and the following example can overturn the above theory.

If you want to get a thorough understanding of this, you must look at the next few examples

Example 3:

var o = {
User: "Dream child",
fn:function () {
console.log (this.user);//Chasing Dream Child
}
}

This code is almost the same as the code above, but here's why this is not pointing to window, and if you follow the above theory, the final this point is to the object that called it, and here is a digression, window is the global object in JS, The variable we created is actually adding attributes to the window, so you can use the window point O object here.

Let's not explain why the above code does not point to window, so we'll take a look at the code.

var o = {
a:10,
b:{
a:12,
fn:function () {
console.log (THIS.A);//12
}
}}

Here is also the object o point, but the same this does not execute it, then you will certainly say that I started to say those are not all wrong? In fact, is not, just a beginning to say inaccurate, next I will add a word, I believe you can thoroughly understand this point of the problem.

Case 1: If there is this in a function, but it is not invoked by an object at the top level, then this is the window, which is meant to be in the strict version of JS that this point is not window, but we do not discuss the strict version of the issue here, You want to know that you can find it on your own internet.

Case 2: If a function has this, the function is called by an object at the top level, then this refers to the object at the top level.

Case 3: If you have this in a function that contains more than one object, even though the function is called by the outermost object, this point is just the object at the top level, example 3 proves that if you don't believe it, then we'll go on to look at a few examples.

var o = {
a:10,
b:{
//A:12,
fn:function () {
console.log (THIS.A);//undefined
}
}
}
O.b.fn ();

Although there is no property A in object B, this one points to object B, because this will only point to its upper-level object, regardless of whether or not there is anything in this object.

There is a more special case, example 4:

var o = {
a:10,
b:{
a:12,
fn:function () {
console.log (THIS.A);//undefined
Console.log (this); Window
}
}
var j = O.b.fn;

Here this point is window, isn't it a bit of a blindfold? In fact, because you do not understand a word, this sentence is equally important.

This will always point to the object that called it last. that is, when it is executed, in Example 4, although the function fn is referenced by object B, it is not executed when the FN is assigned to the variable J, so the end point is window, which is not the same as example 3. Example 3 was directly executed FN.

This is actually going to be the same thing, only in different situations point will be somewhat different, the above summary of each place are some small mistakes, also can not be said to be wrong, but in different circumstances will be different, so I have no way to explain clearly, only you slowly to experience.

Constructor version this:

function Fn () {
this.user = "Dream Child";
}
var a = new Fn ();

The reason why object A can point to the user in the function fn is because the New keyword can change the point of this. To point this to object A, why I said a is an object, because using the new keyword is to create an object instance, to understand this sentence you can think of our example 3, Here we create an instance of FN with variable a (which is equivalent to copying a FN to object a), just creating it and not executing it, and calling this function fn is object A, so this point is the object, so why is there a user in the object fn? Because you've copied the FN function into object A, using the New keyword is equivalent to copying a copy.

In addition to the above, we can also change the point of this by itself, to see the summary of the Call,apply,bind method in JavaScript in detail about how we manually change this point.

A flexible understanding of this point in JavaScript is a great help to our work, and thanks for your support for the cloud-dwelling community website!