js中this的指向

前言

今天看到了方方的文章(this 的值到底是什么？一次说清楚 - 知乎 (zhihu.com))算是完全弄懂了。我来把内容精炼一下，方便自己回顾知识点。

函数调用

ES5 有3中调用方式

func(p1, p2) 
obj.child.method(p1, p2)
func.call(context, p1, p2) // 先不讲 apply

第三种方式可以很好理解 this 的指向，就是context。

那么我们将所有的函数调用全部转换成第三种方式就很好看出this指向的是谁了。

如何转化函数

第一种

func(p1, p2)
// 等价于
func.call(undefined, p1, p2)

window 对象就是默认的 context（严格模式下默认 context 是 undefined）

第二种

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

obj.foo() 
// 等价于
obj.foo.call(obj)

所以 this 指向的就是 obj

题目

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

var bar = obj.foo
obj.foo() // 转换为 obj.foo.call(obj)，this 就是 obj
bar() 
// 转换为 bar.call()
// 由于没有传 context
// 所以 this 就是 undefined
// 最后浏览器给你一个默认的 this —— window 对象

总结

所有函数调用全部转换为call的形式来理解。

箭头函数的就是调用时外面的this。