JavaScript的this超好判断！

this总是让各位感到头疼，但它并不难哦。

先来看一下场景。

function foo() {
  console.log(this.a)
}
var a = 1
foo() //this是window

const obj = {
  a: 2,
  foo: foo
}
obj.foo() //this是obj

const c = new foo() //this是c

• 直接调用 foo，this是window。
• 谁调用了函数，谁就是 this。对于 obj.foo() 来说，this 就是 obj 对象。
• 对于new，this被绑定在了c上面，不会被改变。

关于箭头函数的this

function a() {
  return () => {
    return () => {
      console.log(this)
    }
  }
}
console.log(a()()())

箭头函数其实没有this，箭头函数中的 this 取决于包裹箭头函数的第一个普通函数的 this。在上例中，包裹箭头函数的第一个普通函数是 a，此时的 this 是 window。另外对箭头函数使用 bind 这类函数是无效的。

还有种情况就是bind这些改变上下文的API，对于这些函数来说，this 取决于第一个参数，如果第一个参数为空，那么就是 window。

可能会发生多个规则同时出现的情况，这时候不同的规则之间会根据优先级最高的来决定 this 最终指向哪里。

new 的方式优先级最高，接下来是 bind 这些函数，然后是 obj.foo() 这种调用方式，最后是 foo 这种调用方式，同时，箭头函数的 this 一旦被绑定，就不会再被改变。

以上内容整理自小册《前端面试之道》。

感谢阅读本文。