JS中 this 到底指向谁?

655 阅读2分钟

文章已同步至【个人博客】,欢迎访问😃
文章地址:blog.fanjunyang.zone/archives/js…

关于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,并获取
  • 在定义对象的方法/具有动态上下文的回调函数/构造函数中都不适用

^_<