总结出五种场景下JavaScript中的this指向，覆盖项目中各种情况的this指向

背景：

想起以前刚刚入行的时候时不时遇到一下 this 相关的小问题，虽然这是 JavaScript 的基础知识，但情况太多了很多人都没有掌握好各种常见情况下的this指向，这就容易"指错方向"导致出现BUG，所以空闲想自己整理一下几种常见 this 指向并且附带例子代码说明。

在JavaScript中this的概念：

• 在JavaScript中，this的意思就是"当前"的意思，它是一个指针型变量，它动态指向当前的运行环境。 ， 所以区分各种this指向是前端的基本功了。
• 在不同的使用场景中如果调用同一个函数，this的指向也可能会不同，但是它永远指向其所在函数的真实调用者；如果没有调用者，就指向全局对象，即window。

• 以下说明几种场景的this指向：

  1、在全局环境下直接使用的this指向

  2、在对象中的this

  3、函数内部的this

  4、箭头函数的this

  5、构造函数中的this

一、在全局环境下直接使用的this指向

console.log(this);    // window

注意： congsole.log() 完整的写法其实是 window.console.log()，所以window调用了 console.log() 方法，所以此时 this 直接指向 window

二、 在对象中的this

对象中的方法, this指向调用这些方法的对象, 例如：

let testObj = {
  name: '天天鸭',
  testEvent:function(){
        name: '方法里面的name';
        console.log(this.name);  
  },
  testObj2:{
        name: '内层对象天天鸭',
        testEvent2:function(){
              name: '两层嵌套里面的name';
              console.log(this.name);    
        },
  }
}

testObj.testEvent()   // 天天鸭
testObj..testObj2.testEvent2()  // 内层对象天天鸭

像上述所示，对象嵌套了对象但最终都是指向调用这些方法的对象：

说明：

• testObj.testEvent() 中 testObj 调用了testEvent，所以指向testObj

• testObj.testObj2.testEvent2() 最终其实是对象 testObj2 调用了 testEvent2，所以最终指向testObj2

三、函数内部的this

默认指向window

function test(){
    console.log(this);   // window
}

注意： 严格模式中this会指向undefined，要用window.test()调用才会指向window

四、箭头函数的this

箭头函数没有自己的this , 在箭头函数中，this的指向是由外层（函数或者全局）作用域来决定，如果往外层作用域查找 this 的指向，只要没有非箭头函数（普通函数）的包裹，就 一直往外层查找 ，直到最外层的全局作用域。（大白话：箭头函数根本没有自己的this，内部的this就是外层代码块的this。）

例一(有外层时)： 箭头函数指向了外层fn方法的this,所以输出"天天"

var name = 'window'
let obj = {
  name: '天天',
  fn: function () {
    return () => {
      console.log(this.name) // 输出天天
    }
  }
}
obj.fn()()

例二（没有外层时）： 外层没有方法时，一直往上找，直到window (node环境中输出undefined，浏览器中输出window)

var name = 'window'
let obj = {
  name: '天天',
  fn: () => {
    console.log(this.name) // node环境中输出undefined，浏览器中输出window
  }
}
obj.fn()

五、 构造函数中的this

构造函数中的this 关键字指向当前创建的实例对象。 当我们使用new 调用构造函数时，this 指向当前创建的对象。这使得构造函数能够在实例化对象时将属性和方法绑定到新创建的对象上。

例子：

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        return    this.name + this.age  ;
    };
}

let personTest = new Person('天天', 30);

console.log(personTest.greet()); //  天天30

在上面的代码，当使用new Person( '天天', 30)创建personTest实例时，构造函数 Person中的this指向新创建的personTest对象。

小结：

上面就是我总结出来的五种场景的this指向，如有更多补充或者建议，可以指点指点啊