1. call
可以改变一个函数运行时内部的this的指向对象
用法:func.call(context, arg1, arg2, ...);
- context是设置的this对象,后面的为参数列表;
2. apply
用法:func.apply(context, [argsArray]);
- context是设置的this对象,后面的为参数数组;
3. bind
用法:
function test() {
console.log(this)
}
let obj = {name: 'aaa'}
test.bind(obj) //此时返回的是一个函数,内部this指向obj对象
test.bind(obj)() //此时执行test函数,输出obj对象
this的指向
将函数调用的形式全部转化成call形式的函数调用,再判断this的指向;
- 如果传的 context 是null 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 context 是 undefined)
实例:
var app = {
fn1() {
setTimeout(function(){
console.log(this)
}, 10)
},
fn2() {
setTimeout(()=>{
console.log(this)
},20)
},
fn3() {
setTimeout((function(){
console.log(this)
}).bind(this), 30)
},
fn4: ()=> {
setTimeout(()=>{
console.log(this)
},40)
},
fn5: function(){
console.log(this)
}
}
app.fn1()
app.fn2()
app.fn3()
app.fn4()
app.fn5()
相当于:
var app = {
fn1() {
function fn(){
console.log(this)
}
过10ms 后执行这个函数
当通过app.fn1()调用时,相当于fn.call(undefined) ,所以输出 Window
},
fn2() {
过20ms 执行箭头函数
箭头函数里面没有自己的 this,借用 setTimeout 外面的 this,也就是 app
},
fn3() {
setTimeout的回调函数是一个新创建函数,这个新函数里面绑定了 外面的this,也就是 app
20 ms 后执行新函数,输出 this,也就是刚刚绑定的 app
},
fn4: ()=> {
过40ms 执行箭头函数
箭头函数里面没有 this,用 setTimeout 外面的 this
setTimeout 所在的 fn4也是箭头函数,没有自己的 this,借用外面的 this ,也就是 Window
},
fn5: function(){
console.log(this)
}
通过app.fn5()调用时,相当于app.fn5.call(app),this指向app
}
Event Handler(事件监听函数) 中的 this
通常来说this的值是触发事件的元素的引用,这种特性在多个相似的元素使用同一个通用事件监听器时非常让人满意。
当使用 addEventListener() 为一个元素注册事件的时候,句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样。
button.addEventListener('click' ,function handler(){
console.log(this)
})
当触发事件,执行handler函数时,相当于:
handler.call(event.currentTarget,event)
this指向的就是event.currentTarget
jQuery事件监听函数中的 this
当jQuery的调用处理程序时,this关键字指向的是当前正在执行事件的元素。对于直接事件而言,this 代表绑定事件的元素。对于代理事件而言,this 则代表了与 selector 相匹配的元素。(注意,如果事件是从后代元素冒泡上来的话,那么 this 就有可能不等于 event.target。)若要使用 jQuery 的相关方法,可以根据当前元素创建一个 jQuery 对象,即使用 $(this)。