用简单明了的一句话理解箭头函数的this

快速理解箭头函数的this

1. 什么时候使用箭头函数?
   一般情况下，当把一个函数作为参数使用时才用箭头函数
2. 箭头函数的 this 到底如何指向？
   箭头函数的this引用的是最近作用域中的this
   通俗来讲就是，向外层作用域中，一层层查找this， 直到有 this 的定义, 此时便引用这个查找到的this

有如下代码

const obj = {
  test() {
    // 作用域 1
    
    setTimeout(function () {
      // 作用域 2

      setTimeout(function () {
        // 作用域 3
        console.log(this) // window
      })

      setTimeout(() => {
        // 作用域 4
        console.log(this) // window
      })
    })

    setTimeout(() => {
      // 作用域 5

      setTimeout(function () {
        // 作用域 6
        console.log(this) // window
      })

      setTimeout(() => {
        // 作用域 7
        console.log(this) // 指向obj对象
      })
    })
  }
}

类似于这种普通形式定义的函数，不用看，其this总是指向window

function () {...}

分析上面两个比较难理解的箭头函数this指向

只有箭头函数的this查找规则才是层层向上

1. 作用域4的this为何指向window？
   分析：向上在作用域2中查找this，而作用域2由一个普通funciton定义，因此有一个this指向window，于是作用域4中的this便引用了这个指向window的this。
2. 作用域7的this为何指向obj对象？
   分析：向上在作用域5中查找this，而作用域5由一个箭头函数定义，它本身是没有作用域的，于是又向上查找，到了test的作用域(即作用域1)。由于test定义在对象obj中，因此test本身有一个指向obj的this对象。
   至此我们找到了一个离作用域7最近的并且有this对象的作用域（即作用域1），而作用域1的this指向obj对象，于是7中的this便指向了obj对象