this

如何正确判断this？箭头函数的this是什么？

this是很多人混淆的概念，但其实一点也不难，只是网上一些文章把简单的东西说复杂了，会给你绕蒙圈了。下面我来用简单通俗的方式来讲解this这个概念。

判断函数类型，判断this指向

1、箭头函数

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

首先箭头函数其实是没有 this 的，箭头函数中的 this 只取决包裹箭头函数的第一个普通函数的 this。在这个例子中，因为包裹箭头函数的第一个普通函数是 a，所以此时的 this 是 window。另外对箭头函数使用 bind 这类函数是无效的。

包裹箭头函数的第一个普通函数中的this

2、普通函数

函数如何被调用

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

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

const c = new foo()

接下来我们一个个分析上面几个场景

• 对于直接调用 foo 来说，不管 foo 函数被放在了什么地方，this 一定是 window
• 对于 obj.foo() 来说，我们只需要记住，谁调用了函数，谁就是 this，所以在这个场景下 foo 函数中的 this 就是 obj 对象
• 对于 new 的方式来说，this 被永远绑定在了 c 上面，不会被任何方式改变 this

a.除了new的方式

• foo()：this为window
• obj.foo()：this为obj

b.new的方式：this被固化在实例上

3、bind、call、apply：this是第一个参数

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

let a = {}
let fn = function () { console.log(this) }
fn.bind().bind(a)() // => ?

如果你认为输出结果是 a，那么你就错了，其实我们可以把上述代码转换成另一种形式

// fn.bind().bind(a) 等于
let fn2 = function fn1() {
  return function() {
    return fn.apply()
  }.apply(a)
}
fn2()

可以从上述代码中发现，不管我们给函数 bind 几次，fn 中的 this 永远由第一次 bind 决定，所以结果永远是 window。

let a = { name: 'yck' }
function foo() {
  console.log(this.name)
}
foo.bind(a)() // => 'yck'

发生多个规则同时出现

不同的规则之间会根据优先级最高的来决定 this 最终指向哪里

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

new>bind>obj.foo()>foo() 箭头函数的 this 一旦被绑定，就不会再被任何方式所改变

总结

用一张图来表示this指向规则，方便大家理解，图中的流程只针对于单个规则。