彻底弄懂JavaScript中的this指向

我们都知道 this是JavaScript 函数中的一个关键字，也称之为this对象，this是函数中的一个对象，那么这个对象表示什么呢，这个很重要，因我们会经常使用到这个this，如果搞不清楚这个this到底指向谁，就是很大的一个问题
都知道 this是在函数中的，那么肯定跟函数有关系的，那么肯定就跟函数的定义和调用以及是什么函数有关系了
以下，我总结了一句话很好的帮助我们 理解这个this对象（接下来是重点哈）
看看这个函数是什么函数，这个这个问题我分为两个分支（普通函数 和 箭头函数）：

1、如果这个函数 是普通函数，那么this的指向跟这个函数定义在什么位置没有关系，而是跟这个函数怎么调用有关系

在普通函数中的话，看以下图片

接下来通过案例看看哈

 // 这里是一个普通函数
 function aa() {
      console.log(this);
 }
 // 1、使用 new 关键调用
 var a1 = new aa(); // aa函数中的this指向 a1这个实例对象

 // 2、使用时间驱动调用,事件驱动 调用函数，函数名后面不需要加 ()
 btn.onclick = aa; //aa函数中的this指向 btn这个dom元素

 // 3、直接调用
 aa()  //aa函数中的this指向 window

2、如果是箭头函数，那么函数中的this 就指向 定义这个箭头函数定义在什么位置有关系。

看一下案例

// 这里是一个直接定义在 window全局的箭头函数
var bb = () => {
     console.log(this);
}
// 1、利用new来调用箭头函数
// var b1 = new bb(); //这个会报错，箭头函数不可以用new来调用哟

// 2、使用事件驱动来调用bb这个箭头函数
btn.onclick = bb; //bb函数中的this 指向 window

// 3、直接调用
bb() // bb函数中的this指向window

通过上面的案例，我们会发现就算我用使用事件驱动来调用箭头函数，但是函数中的this任然指向的 window，因为bb这个箭头函数定义的是一个全局的函数，全局的位置this指向的就是window
但是还有一种情况，就是函数写在对象中或者函数写在函数中，那么这个函数中的this又该是怎么样的指向呢

接下来我们在看看两个案例
1、在对象中写函数

// 这是一个函数写在对象中案例
var obj = {
      // 这是对象中的普通函数
      fun: function () {
           console.log(this);
      },
      // 这是对象中的 箭头函数
       fn: () => {
           console.log(this);
       }
}
obj.fun(); //this指向的是 obj这个对象
obj.fn(); // this指向的是 window

有同学就疑问了，fn不是 obj这个函数的一个属性吗，this不应该指向 obj吗，为什么指向的是wwindow呢？我们刚刚有介绍了，箭头函数中的this跟定义在哪有关系的，箭头函数中的this 为 箭头函数定义这个位置的this的值

2、在函数中写函数，内部函数的this指向

// 这是一个函数写在函数中案例
var obj = {
       //这个位置的this指向的就是window，所以fn函数中的this就是window
      // 这是对象中的 箭头函数
       fn: () => {
           console.log(this);
       }
}
obj.fn(); // this指向的是 window
2、在函数中写函数，内部函数的this指向
其实经常看到案例就是 定时器这个案例了
btn.onclick = function () {
    setInterval(function () {
        console.log(this); //这里的this指向 window
    }, 1000)
}

btn.onclick = function () {
    setInterval(() => {
         console.log(this); //这里的this指向 btn这个元素
     }, 1000)
}

为什么结果会不一样呢，这个问题就要涉及到 定时器中回调函数的执行了，这个回调函数属于直接调用的，直接调用对于普通函数来说，函数中的this指向window，也就是句代码执行window的原因

btn.onclick = function () {
    setInterval(function () {
        console.log(this); //这里的this指向 window
    }, 1000)
}

但是对于箭头函数来说，函数中的this跟调用没有关系，就看在哪定义，或者定义这个函数所处位置的this指向有关系

btn.onclick = function () {
    //这里的this指向为 这个元素，所以箭头函数定义所处的位置中的this为btn，
    //那么箭头函数中的this也就为这个this
    setInterval(() => {
         console.log(this); //这里的this指向 btn这个元素
     }, 1000)
}

好了，上面就是我对函数中this指向问题的讲解，希望对大家有帮助吧，如果不是很明白的可以留言。