目标：js中this的指向?
问题的引出
- 指出this指向什么
var obj = {
foo: function(){
console.log(this)
}
}
var bar = obj.foo
obj.foo() // 打印出的 this 是 obj
bar() // 打印出的 this 是 window
js中函数的三种调用形式
func(p1, p2)obj.child.method(p1, p2)func.call(context, p1, p2)
需要记住： 只有func.call(context, p1, p2)才是正常的调用形式，其余两种都是语法糖，它们最终可以转换为func.call(context， p1, p2)这种形式。
进行转化
func(p1, p2) ==> func.call(undefined, p1, p2)obj.child.method(p1, p2) ==> obj.child.method.call(obj, p1, p2)func.call(context, p1, p2) 无需转换
this，就是上面代码中的context
注意：
如果传入的context是null或undefined，那么window对象就是默认的context（严格模式下，默认context仍然是undeinfed）
实例示例
先看 func(p1, p2) 中的 this 如何确定：
function func(){
console.log(this)
}
func()
转换为：
function func(){
console.log(this)
}
func.call(undefined)
所以，context 就是undefined，因此this指向window对象
再看obj.child.method(p1, p2)的this 确定
var obj = {
foo: function(){
console.log(this);
}
}
obj.foo();
转换为
var obj = {
foo: function(){
console.log(this);
}
}
obj.foo.call(obj);
所以this指向的是obj
回到下面代码
var obj = {
foo: function(){
console.log(this)
}
}
var bar = obj.foo
obj.foo()
bar()
转换
var obj = {
foo: function(){
console.log(this)
}
}
var bar = obj.foo
obj.foo() ==> obj.foo.call(obj) ; // this指向obj
bar() ==> bar.call(undefined); // this指向window
[]语法
function fn (){ console.log(this) }
var arr = [fn, fn2]
arr[0]() // 这里面的 this 又是什么呢？
可以将arr[0]()转换为arr.0()（注意：这种语法是错误的），但形式上与obj.child.method(p1, p2)就对应起来了(arr[0]是一个对象)；
因此 arr[0]()==>arr.0() ==> arr.0.call(arr)，
最终，this指向arr
总结
- this就是你call一个函数时，传入的cotext
- 如果函数的调用形式不是call形式，请按照[转换代码]将其转换为call形式
第二部分
注意： 要理解了上面的再来看这部分的内容
实际工作中面对的this，可能比上面的情况更晦涩些
Event Handler 中的 this
btn.addEventListener('click', function handler(){
console.log(this) ; // this指向什么
});
记住：我们说过this是由call/apply来指定的
因此只需要找到handler()被调用时的代码就行了
但是addEventListenter是浏览器的内置函数，我们无法获
取到代码，但是可以文档 中知道答案，MDN这样说：
通常来说this的值是触发事件的元素的引用，这种特性在多个相似的元素使用同一个通用事件监听器时非常让人满意。
当使用 addEventListener() 为一个元素注册事件的时候，句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样。
对于上面说有一点需要注意：“this的值是触发事件的元素的引用”，当使用事件代理时，this指向的并不是目标元素，但是我们可以通过相关的方法获取到触发事件的目标元素
可以你可以假想浏览器的源码是这样写的
// 当事件被触发时
handler.call(event.currentTarget, event)
// 那么 this 是什么不言而喻——就是指向触发事件的元素
jQuery Event Handler 中的 this
那么下面代码中的 this 是什么呢：
$ul.on('click', 'li' , function(){
console.log(this)
})
同样，不要瞎猜，你要么看 jQuery 源码是怎么 call 这个函数的，要么看jQuery 文档。
jQuery 文档是这样写的:
当调用jquery的事件处理程序时，this指向当前正在执行事件的元素；对于直接绑定事件而言，this代表绑定事件的元素。**对于代理事件而言，this则代表了与selector相匹配的元素
注意，如果事件是从后代元素冒泡上来的话，那么 this 就有可能不等于 event.target。)若要使用 jQuery 的相关方法，可以根据当前元素创建一个 jQuery 对象，即使用 $(this)。
总结一下如何确定 this 是值
- 看源码中对应函数是怎么被call的（最靠谱的方法）
- 看文档
- console.log(this)
如何强制指定 this 的值？
自己写 call / apply 即可：
function handlerWrapper(event){
function handler(){
console.log(this) // 请问这里的 this 是什么
}
handler.call({name:'饥人谷'}, event)
}
btn.addEventListener('click', handlerWrapper)
你也可以直接使用 bind，与上面的代码效果差不多：
function handler(){
console.log(this) // 请问这里的 this 是什么
}
var handlerWrapper = handler.bind({name:'饥人谷'})
btn.addEventListener('click', handlerWrapper)
上面三句代码可以挤成一句：
btn.addEventListener('click', function(){
console.log(this) // 请问这里的 this 是什么
}.bind({name:'饥人谷'}))
这是前端里一个常见的套路。
this 不难，就看你有没有按照 call / apply 来理解函数了。
网友评论