The point of this in JS

Articles reproduced from:

Bole Online columnist-Chase dream Son

Links: http://web.jobbole.com/88264/

The first thing to say is that the point of this is not deterministic at the time of the function definition, and only when the function is executed can you determine who the this is pointing to, and in fact this is the object that called it (some questions that will explain why there is a problem, Although most of the articles on the internet say so, although in many cases to understand that there will be no problem, but in fact that understanding is not accurate, so when you understand this is a kind of elusive feeling), then I will go into the problem in depth.

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

Example 1:

function a() {

var User = "Chasing the Dream";

console. Log(this. User); //undefined

console.  Log(this); //window

}

a();

As we said above, this finally points to the object that called it, where function A is actually being ordered by the Window object, and the following code can prove it.

function a() {

var User = "Chasing the Dream";

console. Log(this. User); //undefined

console. 　　Log(this); //window

}

Window. a();

The same as the above code, in fact, the alert is also a window property, but also window points out.

Example 2:

var o = {

user:"Chasing the Dream Son",

fn:function() {

console. Log(this. User); //Chase dream son

}

}

o. fn();

Here the this point is the object o, because you call this FN is executed through O.FN (), the natural point is the object o, here again to emphasize a point, this is in the creation of the function is not the decision, in the call to decide, who calls the point to who, be sure to figure out this.

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

If you want to understand this thoroughly, you have to look at the next few examples

Example 3:

var o = {

user:"Chasing the Dream Son",

fn:function() {

console. Log(this. User); //Chase dream son

}

}

window. o. fn();

This code and the above code is almost the same, but here is why this is not pointing to the window, if according to the above theory, the end of this point is to call its object, here first to say a digression, window is the global object in JS, The variable we created actually adds a property to the window, so you can use the window point O object.

Here's why the above code does not point to window, so let's look at a piece of code.

var o = {

a:ten,

b:{

a:

fn:function() {

console. Log(this. a); //12

}

}

}

o. b. fn();

Here is also the object o point out, but the same this does not execute it, then you will certainly say that I started to say that those are not all wrong? In fact, is not, just at the beginning of the inaccurate, 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 called by the object above, then this point is the window, it is necessary to explain that in the strict version of JS this point is not the window, but we do not discuss the strict version of the problem, You want to know that you can search the Internet yourself.

Scenario 2: If a function has this, the function is called by the object above, then this is the object at the top level.

Case 3: If there is this in a function, the function contains multiple objects, although the function is called by the outermost object, this point is only the object above it, example 3 can prove that if you do not believe, then we continue to look at a few examples.

var o = {

a:ten,

b:{

//A:12,

fn:function() {

console. Log(this. a); //undefined

}

}

}

o. b. fn();

Although there is no attribute a in object B, this is also object B, because this only points to its upper-level object, regardless of whether there is anything in this object.

There is a more special case.

Example 4:

var o = {

a:ten,

b:{

a:

fn:function() {

console. Log(this. a); //undefined

console.  Log(this); //window

}

}

}

var J = o. b. fn;

J();

Here this is pointing to window, is it some kind of blindfold? It's just as important that you don't understand a word.

This always points to the last object to invoke it , that is, to see who called it when it executes, example 4, although the function fn is referenced by the object B, but when the FN is assigned to the variable j is not executed, so the final point is the window, which is not the same as the example 3, Example 3 is the direct execution of the FN.

This said to go in fact is that one thing, but in different circumstances point to the will be a little different, the above summary of each place have some small mistake, can not say is wrong, but in different circumstances will have different, so I also have no way to explain clearly, only you slowly to realize.

Constructor version of this:

function Fn() {

this. User = "Chasing the Dream Son";

}

var A = new Fn();

Console. Log(a. User); //Chase dream son

The reason why object A can point out the function fn inside the user is because the New keyword can change the point of this, the this point to the object A, why I said a is an object, because the new keyword is to create an object instance, understand this sentence can think of our example 3, We have created an instance of FN here with variable a (equivalent to copying a copy of FN into object a), at this time just create, and not execute, and call this function fn is object A, then this point is the natural object A, then why the object FN will have the user, Because you have copied an 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, on its own to change the point of the Call,apply,bind method in JavaScript to see the summary of this article, detailed how we manually change the point of this.

Update a small problem when this hit return

function fn()

{  

this.   User = ' Chasing the Dream Son ';

return {};

}

var A = new fn;

Console. Log(a. User); //undefined

Look at one more

function fn()

{  

this.   User = ' Chasing the Dream Son ';

return function() {};

}

var A = new fn;

console. Log(a. User); //undefined

Again

function fn()

{  

this.   User = ' Chasing the Dream Son ';

return 1;

}

var A = new fn;

Console. Log(a. User); //Chase dream son

function fn()

{  

this.   User = ' Chasing the Dream Son ';

return undefined;

}

var A = new fn;

Console. Log(a. User); //Chase dream son

What do you mean?

If the return value is an object, then this is the object that is returned, and if the return value is not an object then this is an instance of the function.

function fn()

{  

this.   User = ' Chasing the Dream Son ';

return undefined;

}

var A = new fn;

console.  Log(a); //fn {User: "Chasing the Dream"}

Another point is that although Null is also an object, here this is an instance of the function, because NULL is special.

function fn()

{  

this.   User = ' Chasing the Dream Son ';

return null;

}

var A = new fn;

console. Log(a. User); //Chase dream son

Knowledge Point Supplement:

1. The default this in the strict edition is no longer the window, but the undefined.

The 2.new operator will change the point of the function this, although we have explained above, but not in-depth discussion of this issue, the Internet is rarely said, so it is necessary to say here.

function fn() {

this. num = 1;

}

var A = new fn();

Console. Log(a. Num); //1

Why does this point to a? First the New keyword creates an empty object, and then it automatically calls a function apply method, which points to the empty object, so that the inside of the function is replaced by this empty object.

The point of this in JS