apply,call,bind三者的区别
var a = {
name:'a',
fn(){
console.log(`我的名字是${this.name}`)
}
}
var b = a.fn
b()//我的名字是undefined
如果只是a.fn();可以正常打印结果(我的名字是a);而此时var b = a.fn,此时调用函数的是在window环境下的b,但window下没有属性name;所以打印undefined;如果想要调用b函数打印出想要的结果那么此时call,apply,bind就能发挥作用了
1.call
var a = {
name:'a',
fn(){
console.log(`我的名字是${this.name}`)
}
}
var b = a.fn
b.call(a)//我的名字是a
call方法也可以传递参数进去
var a = {
name:'a',
fn(age,tall){
console.log(`我的名字是${this.name},今年${age}岁,身高${tall}cm`)
}
}
var b = a.fn
b.call(a,21,175)//我的名字是a,今年21岁,身高175cm
2.apply
apply也可以做到,但是与call区别在于call传递参数方式是参数列表,但apply是传递参数数组进去
var a = {
name:'a',
fn(age,tall){
console.log(`我的名字是${this.name},今年${age}岁,身高${tall}cm`)
}
}
var b = a.fn
b.apply(a,[18,175])//我的名字是a,今年18岁,身高175cm
注意如果call和apply的第一个参数写的是null,那么this指向的是window对象
var name = 'windowname'
var a = {
name:'a',
fn(age,tall){
console.log(`我的名字是${this.name},今年${age}岁,身高${tall}cm`)
}
}
var b = a.fn
b.call(null,18,175)//我的名字是windowname,今年18岁,身高175cm
3.bind
bind 是返回绑定this之后的函数,便于稍后调用;apply 、call 则是立即执行 。
var name = 'windowname'
var a = {
name:'a',
fn(age,tall){
console.log(`我的名字是${this.name},今年${age}岁,身高${tall}cm`)
}
}
var b = a.fn
b.bind(a)()//我的名字是a,今年undefined岁,身高undefinedcm
bind()也可以传递参数,但是有所区别,可以看出,bind方法可以分多次传参,最后函数运行时会把所有参数连接起来一起放入函数运行。
var name = 'windowname'
var a = {
name:'a',
fn(age,tall){
console.log(`我的名字是${this.name},今年${age}岁,身高${tall}cm`)
}
}
var b = a.fn
b.bind(a,18)(175)//我的名字是a,今年18岁,身高175cm
三者都可以改变函数的this对象指向。
三者第一个参数都是this要指向的对象,如果如果没有这个参数或参数为undefined或null,则默认指向全局window。
三者都可以传参,但是apply是数组,而call是参数列表,且apply和call是一次性传入参数,而bind可以分为多次传入。
bind 是返回绑定this之后的函数,便于稍后调用;apply 、call 则是立即执行