JS中的 this 指向的七种场景

this指向问题

this是一个关键字，指向一个对象，在不同的调用环境this指向的对象也不一样。

1、全局this指window

console.log(this)

2、全局函数里的this指window

   function fn () {
      console.log(this)
    }
   fn()

3、事件处理函数里的this指绑定事件的DOM对象（不一定是事件源，哪个对象绑定就是那个对象）

    document.querySelector('#box').onclick = function () {
      console.log(this)
}

4、没有名字的、明确指向的匿名函数的this指window

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

    setTimeout(function () {
      console.log(this)
}, 1000)

包括数组的map，reduce等方法里面的匿名函数this都是指window；匿名回调函数里的this也是window。

示例1：

    var a = 2;
    function fun () {
        console.log(this.a);
}
    var o = { a: 3, fun: fun }
    o.fun(); // 打印3  

这时是o对象调用的函数，this指向o。只看前四行，函数没有被明确调用，指向的是window。

示例2： 赋值语句的结果就是赋的值

  var p = { a: 4 };
    // 把赋值的结果也就是fun这个函数放进一个自调用函数里来
    //执行，this指window
  (p.fun=o.fun)(); // 打印2

5、对象方法里的this指对象本身，不管是字面量声明还是原型方法或者class，this都是当前实例对象

  var obj = {
      name: 'lisi',
      say: function () {
        console.log(this) // obj
      }
}

6、构造函数里的this指将来new的实例

 function Dog (name) {
      this.name = name
}

7、箭头函数没有自己的this指向

 1、如果你希望this指当前对象，那么就用普通函数
 2、如果你希望this指向外层对象，用箭头函数
 3、如果内层外层都要，用普通函数，this指向内层；在外层声明一个变量把外层this存下来，比如
  const _this = this，_this指向  外层。