Simple understanding _javascript techniques for this point in JavaScript

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 = ' Little j ';
  Console.log (This.user); Undefined
  console.log (this);//window
}
A (); 

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 = ' Little J ';　　 
Console.log (this.user);//undefined Console.log (this);
} 
WINDOW.A ()//window 

Like the code above, alert is also an attribute of window, which is also a window.
Example 2:

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

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 son", 
fn:function () {
 console.log (this.user);//Chasing Dream son
 }
 Window.o.fn ();

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
    }
}}
O.b.fn ();

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;
J ();

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 = "Little J";
}
var a = new Fn ();
Console.log (A.user); Little J 

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 (equivalent to a copy of FN to object a), at this point just create, and not execute, and call this function fn is object A, then this point is the nature of object A, then why object FN will have user, 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 this to the point ========>>> call, apply, bind

Update a small problem when this hits return

function fn () 
{ 
  This.user = ' little J '; 
  return {}; 
}
var a = new Fn; 
Console.log (A.user); Undefined

Look at one more.

function fn () 
{ 
  This.user = ' little J '; 
  return function () {};
}
var a = new Fn; 
Console.log (A.user); Undefined

Again

function fn () 
{ 
  This.user = ' little J '; 
  return 1;
}
var a = new Fn; 
Console.log (A.user); Small J
function fn () 
{ 
  This.user = ' little J '; 
  return undefined;
}
var a = new Fn; 
Console.log (A.user); Little J

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

function fn () 
{ 
  This.user = ' little J '; 
  return undefined;
}
var a = new Fn; 
Console.log (a); fn {User: "Little J"}

The other thing is that although NULL is also an object, here this is an instance of the function, because NULL is more special.

function fn () 
{ 
  This.user = ' little J '; 
  return null;
}
var a = new Fn; 
Console.log (A.user); Little J

knowledge points added:
1. In the strict version of the default this is no longer window, but undefined.
The 2.new operator will change the point of the function this, although we explained above, but did not discuss this issue in depth, the internet is rarely said, so here is necessary to say.

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 automatically calls a function apply method, which points to this empty object, so that this is substituted for this empty object within the function.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.