Exploring what this pointer points to in JavaScript_Basic knowledge

Explore what this pointer points to in JavaScript

First of all, it must be said that the point of this cannot be determined when the function is defined. Only when the function is executed can it be determined who this points to. In fact, this ultimately points to the object that called it (this There are some problems with this sentence, and I will explain why there is a problem later. Although most articles on the Internet say this, although in many cases there will be no problems in understanding it that way, in fact, it is inaccurate to understand it that way, so There will be a feeling of uncertainty when you understand this), then I will explore this issue in depth next.

Why should you learn this? If you have studied functional programming or object-oriented programming, then you definitely know what it is used for. If you have not studied it, you don’t need to read this article for the time being. Of course, you can also read it if you are interested. After all, this is js. Something that must be mastered.

Example 1:

function a(){
  var user = "追梦子";
  console.log(this.user); //undefined
  console.log(this); //Window
}
a();

According to what we said above, this ultimately points to the object that calls it. The function a here is actually pointed out by the Window object, as the following code can prove.

function a(){
  var user = "追梦子";
  console.log(this.user); //undefined
  console.log(this);　　//Window
}
window.a();

It’s the same as the above code. In fact, alert is also an attribute of window and is also clicked by window.

Example 2:

var o = {
  user:"追梦子",
  fn:function(){
    console.log(this.user); //追梦子
  }
}
o.fn();

This here points to the object o, because when you call this fn, it is executed through o.fn(), so the natural point is the object o. Let me emphasize again that the point of this cannot be determined when the function is created. Yes, it can be decided at the time of call. Whoever calls points to whom. Be sure to understand this.

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

If you want to fully understand this, you must read the next few examples

Example 3:

var o = { user:"追梦子", 
fn:function()
{ console.log(this.user); //追梦子 } } 
window.o.fn();

This code is almost the same as the code above, but why does this here not point to window? If according to the above theory, ultimately this points to the object that calls it. Here is an aside, window It is a global object in js. The variable we create actually adds attributes to the window, so we can use the window dot o object here.

Let’s not explain why this code in the above code does not point to window. Let’s look at a piece of code.

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

Object o is also pointed out here, but this also does not execute it. Then you will definitely say that what I said at the beginning is wrong? Actually it's not, it's just that what I said at the beginning was inaccurate. Next I will add a sentence. I believe you can completely understand the problem pointed by this.

Case 1: If there is this in a function, but it is not called by the upper-level object, then this points to window. What needs to be noted here is that in the strict version of js, this does not point to window, but We will not discuss the strict version here. If you want to know more, you can search online.

Case 2: If there is this in a function and this function is called by the upper-level object, then this points to the upper-level object.

Case 3: If there is this in a function, which contains multiple objects, even though the function is called by the outermost object, this only points to the object above it. Example 3 can prove , if you don’t believe it, then let’s continue 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 attribute a in object b, this this also points to object b, because this will only point to its upper-level object, regardless of whether there is something this wants in this object.

There is also a more special situation, 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();

This here points to window. Are you confused? In fact, it is because you did not understand a sentence, which is also crucial.

This always points to the object that called it last, that is, who called it when it was executed. In Example 4, although function fn is referenced by object b, it is not assigned when fn is assigned to variable j. It is not executed, so it ultimately points to window. This is different from Example 3, which directly executes fn.

This is actually the same thing, but it will point to something different in different situations. There are some small mistakes in the above summary, which cannot be said to be errors, but in different environments. The situation will be different next time, so I can't explain it clearly all at once. I can only let you experience it slowly.

Constructor version of this:

function Fn(){
  this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子

这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向，将这个this指向对象a，为什么我说a是对象，因为用了new关键字就是创建一个对象实例，理解这句话可以想想我们的例子3，我们这里用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象Fn中会有user，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份。

除了上面的这些以外，我们还可以自行改变this的指向，关于自行改变this的指向请看JavaScript中call,apply,bind方法的总结这篇文章，详细的说明了我们如何手动更改this的指向。

更新一个小问题当this碰到return时

function fn() 
{ 
  this.user = '追梦子'; 
  return {}; 
}
var a = new fn; 
console.log(a.user); //undefined

再看一个

function fn() 
{ 
  this.user = '追梦子'; 
  return function(){};
}
var a = new fn; 
console.log(a.user); //undefined

再来

function fn() 
{ 
  this.user = '追梦子'; 
  return 1;
}
var a = new fn; 
console.log(a.user); //追梦子
function fn() 
{ 
  this.user = '追梦子'; 
  return undefined;
}
var a = new fn; 
console.log(a.user); //追梦子

什么意思呢？

如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。

function fn() 
{ 
  this.user = '追梦子'; 
  return undefined;
}
var a = new fn; 
console.log(a); //fn {user: "追梦子"}

还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。

function fn() 
{ 
  this.user = '追梦子'; 
  return null;
}
var a = new fn; 
console.log(a.user); //追梦子

知识点补充：

1.在严格版中的默认的this不再是window，而是undefined。

2.new操作符会改变函数this的指向问题，虽然我们上面讲解过了，但是并没有深入的讨论这个问题，网上也很少说，所以在这里有必要说一下。

function fn(){
  this.num = 1;
}
var a = new fn();
console.log(a.num); //1

为什么this会指向a？首先new关键字会创建一个空的对象，然后会自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。