通过查了很多资料我终于能理明白this到底指向谁了，首先我们得从函数调用的形式来说
函数调用
JS中有三种函数调用形式：
func(p1, p2)
obj.child.method(p1, p2)
func.call(context, p1, p2) // 先不讲 apply
一般，初学者都知道前两种形式，而且认为前两种形式「优于」第三种形式。
从看到这篇文章起，你一定要记住，第三种调用形式，才是正常调用形式：
func.call(context, p1, p2)
其他两种都是语法糖，可以等价的转变为call的形式：
func(p1, p2) 等价于
func.call(undefined, p1, p2)
obj.child.method(p1, p2) 等价于
obj.child.method.call(obj.child, p1, p2)
此处划重点！！！
（我们称此代码为「转换代码」，方便下文引用）
至此我们的函数调用只有一种形式：
func.call(context, p1, p2)
这样，this 就好解释了this，
就是上面代码中的 context。就这么简单。
this 是你 call 一个函数时传的 context，由于你从来不用 call 形式的函数调用，所以你一直不知道。
先看 func(p1, p2) 中的 this 如何确定：
当你写下面代码时
function func(){
console.log(this)
}
func()
等价于
function func(){
console.log(this)
}
func.call(undefined) // 可以简写为 func.call()
按理说打印出来的 this 应该就是 undefined 了吧，但是浏览器里有一条规则：
如果你传的 context 不是一个对象，那么 window 对象就是默认的 context。
因此上面的打印结果是 window。
如果你希望这里的 this 不是 window，很简单：
func.call(obj) // 那么里面的 this 就是 obj 对象了
再看 obj.child.method(p1, p2) 的 this 如何确定:
var obj = {
foo: function(){
console.log(this)
}
}
obj.foo()
按照「转换代码」，我们将 obj.foo() 转换为
obj.foo.call(obj)
好了，this 就是 obj。搞定。
---------------------------总结------------------------------
- this 就是你 call 一个函数时，传入的 context。
- 如果你的函数调用形式不是 call 形式，请按照「转换代码」将其转换为 call 形式。
网友评论