【小技巧】如何弄清this里的值

大家一定都见过像这样的题

var obj = {
  foo: function(){
    console.log(this)
  }
}

var bar = obj.foo
obj.foo() 
bar()

在这段代码里，obj.foo() 和bar() 打印出来的结果是不一样的。
前者是obj，后者是bar。

为什么会有这样的区别呢？

在回答这个问题之前，你需要明白，函数的调用形式有三种

func(p1,p2)
obj.child.method(p1,p2)
func.call(context,p1,p2)

在平时的编码中，我们往往更喜欢用第一种和第二种方法。
但你或许不知道，第三种形式才是函数的本来面目，我们最爱用的前两种方法，本质上是第三种的语法糖。
是的，第三种调用方式，才是函数正常的调用形式。

带着这个认识，让我们把它们都变为func.call的形式吧。这样我们就能更加深入的理解函数，进而看到this的真面目。

func(p1,p2)
等同于
func.call(undefined,p1,p2)

需要注意的是，如果context值中的值为null或underfined，那么它将会指向window

obj.child.method(p1,p2)
等同于
obj.child.method.call(obj.child,p1,p2)

再让我们回到一开始的题目，这时你应该知道，为什么this的值会有所不同了。

【】语法
让我们来讨论一下像这种情况

function fn (){ console.log(this) }
arr[fn,fn2]
arr[0]() //这里面的this又是什么呢？

像这种情况，我们可以把arr[0]想象成arr.0(我知道这不合语法）
这样，它就变成了obj.child.method(p1, p2)的形式
然后再把它转换成func.call 的形式。

当我们把arr[0]想象成arr.0时。
它也就变成了arr.0.call(arr,p1,p2)
由此可知，this的值是arr

箭头函数
箭头函数中，没有this。它其实并不支持this
如果箭头函数中出现了this，你就把它当成函数外面的this，外面的this是什么，里面的就是什么，别想太多。

一句话总结，this就是你传入函数时，传入的第一个参数！