JS高级进阶之this究竟如何理解？

前言: 作者在使用react的时候对this的理解越发地迷离扑朔，this到底指向什么？为什么this指向如此灵活？作者阅读了很多书看了不少视频，在此给大家简单介绍一些关于this指向的问题，并且会持续更新。

1. this指向和什么相关?
   1. 严格模式 --- 影响全局函数
   2. 方法
   3. 事件
   4. 定时器
2. 为什么要设计this?

js之父在设计this的时候目的是使得整个js给更加简单易用，据说他是故意让this这么乱的

      3.关于直接调用问题

如果直接对设置的函数在全局进行调用，在浏览器中函数this是会默认指向window的，以前有句话是万物全属于window，但是当nodejs横空出世，全局函数就不在囊括整个js，因为js从此便可以运行在服务器端，成为了一门可以进行服务端开发的语言，借助v8引擎，nodejs的运行速度也相当可观。

但是你开启了严格模式，直接指向undefined

    4.在对象中进行调用

使用任何对象进行调用函数的时候，就会使得函数内部的this指向该对象。

如下图中，show函数被绑定在arr对象的原型上，进行调用的时候，show函数中的this指向arr对象。

     5.This的指向和方法有紧密的影响，如果在定时器中进行调用函数的时候，函数中的this会直接去指向window，因为定时器函数是属于全局的函数，本身进行调用定时器的时候是window.setTimeout() 所以在定时器中进行调用函数的时候，函数中的对象又会指向window，但是如果你开启严格模式，又会指向undefined. 从这个角度也可以观察出函数中This的指向和方法也有紧密的影响。

    6.函数中this的指向也会受到事件的影响，你给什么绑定事件的时候，将触发事件回调函数设为该函数后，该函数的this指向绑定事件的dom元素。

     7.箭头函数，众所周知，我们可以使用call/bind/apply进行操作this的指向，而箭头函数在进行设置的时候，默认就是调用了bind将箭头函数中this将箭头函数内部的this指向了外部中的This，也就是箭头函数中的this永远和箭头函数外部的this指向是一致的。

例如我们将箭头函数定义在全局，this就指向全局

但是很多人会犯一个大坑就是以为在对象中进行设置属性为箭头函数的时候，箭头函数中的this指向对象，这是错的，箭头函数中的this会指向外部的this，也就是很有可能this指向的是全局！！！ 

    8. React类组件中的this理解

1. 在react类组件的render渲染函数中环境是指向整个类组件的，所以进行编写箭头函数的时候this指向类组件的
2. 在类中进行定义箭头函数的时候，箭头函数中的this会开启class fields类实例作用域，也就是类作用域实例中的this指向本类，由于箭头函数内部的this默认指向外部的this，这就使得箭头函数中的this可以去调用类组件中的属性/方法。