this 指向

在 JavaScript 中为什么使用 this ？

在某些函数或者方法的编写中，this 可以让我们更加便捷的方式来引用对象，在进行一些 API 设计时，代码更加的简洁和易于复用。

this 的指向

在全局作用域下，this 指向 window 对象。但是我们很少在全局作用域下去使用 this，一般都是在函数中使用。

函数中 this 的指向

函数中 this 的绑定跟定义函数的位置没有关系，跟函数调用方式以及调用的位置有关系，也就是说只有在调用的时候才能知道 this 指向什么对象。

独立函数调用时，this 指向 window 对象。

• 函数被直接调用时

  // 函数声明
  function fn() {
    console.log(this) // window 对象
  }
  // 函数调用
  fn()

• 函数调用链：函数在另一个函数中被调用

  // 函数声明
  function fn() {
    console.log(this) // window 对象
  }
  function fn2() {
    fn()
  }
  // 函数调用
  fn2()

• 将函数作为参数，传入到另一个函数中

  // 函数声明
  function fn() {
    console.log(this) // window 对象
  }
  function fn1(func) {
    func()
  }
  // 函数调用
  fn1(fn)

通过某个对象来进行调用

  // 函数声明
  function fn() {
    console.log(this) // obj 对象
  }
  const obj = {
    func: fn
  }
  // 对象调用
  obj.func()

多级对象调用

  // 函数声明
  function fn() {
    console.log(this) // obj2 对象
  }
  const obj1 = {
    obj2: {
      func: fn
    }
  }
  // 对象调用
  obj1.obj2.func()

  // 函数声明
  function fn() {
    console.log(this) // window 对象
  }
  const obj = {
    func: fn
  }
  // 对象调用
  const a = obj.func
  a()

内置函数的 this 指向

• setTimeout 中会传入一个函数，这个函数中的 this 通常是 window

 setTimeout(function() {
   console.log(this) // window 对象
 }, 1000)

• 数组的 forEach 函数

 [1, 2, 3].forEach(function(item) {
   console.log(this) // window 对象
 })

• 事件监听的回调函数中的 this， 绑定的是触发事件的 dom 对象