关于 this 的指向，确实是一个令人头疼的问题，那么 this 到底指向谁呢？

归根到底一句话：谁调用了包含 this 的方法，那么 this 就指向谁

关于这点，有如下三个观点：

  1. this 指向的，永远只可能是对象！
  2. this 指向谁，永远不取决于 this 写在哪！而是取决于函数在哪调用。
  3. this 指向的对象，我们称之为函数的上下文 context，也叫函数的调用者。
  • 在全局中，通过函数名直接调用，this 就指向 window

如下：

function Test(){

}
Test()

此时，this 就指向 window

  • 通过对象.函数名()调用的：this 就指向这个对象

如下：

let Test = {
  name:"Fan",
  say:function(){
  	console.log(this.name)
  }
}
Test.say()	// Fan

此时，this 就指向 Test

不过，匿名函数(比如：定时器)具有全局性，因此 this 对象通常也指向 window

  • 函数作为数组的一个元素，通过数组下标调用的，this 指向这个数组

如下：

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

let arr = [Test,1,2];
arr[0]();

此时，this 就指向 arr

  • 函数作为 window 内置函数的回调函数调用时，this 就指向 window，比如：setInterval、 setTimeout 等）

如下：

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

setTimeout(Test,1000);
// setInterval(Test,1000);

此时，this 就指向 window

  • 函数作为构造函数，用 new 关键字调用时，this 指向新 new 出的对象

如下：

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

let obj = new Test();

此时，this 就指向 obj

  • 如果使用 call、apply、bind 绑定对象，那么 this 就指向那个绑定的对象
  • 箭头函数

箭头函数比较特殊，因为箭头函数内部没有 this，this 指向外层最近的调用者，简单的说，就是需要向上找一级

  • 箭头函数在调用时，不会生成自身作用域下的 this 和 arguments
  • 不像普通函数一样在调用时自动获取this，而是沿着作用域链向上查找，找到最近的外部一层作用域的this，并获取
  • 在定义对象的方法/具有动态上下文的回调函数/构造函数中都不适用