call apply bind的区别

Js中call apply bind三者的区别

在说区别之前还是先总结一下三者的相似之处:

1. 都是用来改变函数的this对象的指向的
2. 第一个参数都是this要指向的对象
3. 都可以利用后续参数传参

let xiaowang = {
    name:'小王',
    gender:'男',
    age:22,
    say:function(){
        console.log('姓名:' + this.name + ' 性别: ' + this.gender + '年龄:' + this.age)
    }
}
let xiaohong = {
    name:'小红',
    gender:'女',
    age:22
}
xiaowang.say()

这段代码没什么好说的,打印结果一定是姓名:小王 性别:男 年龄:22
那么如何用xiaowang的say方法来显示xiaohong数据呢
这里就可以用到call、apply或bind三个方法了,在此也可以了解到它们三者之间的区别

call方法:

xiaowang.say.call(xiaohong)

apply方法:

xiaowang.say.apply(xiaohong)

bing方法:

xiaowang.say.bind(xiaohong)()

call、apply和bind的区别就是bind返回的是一个函数,我们还需要在执行一次
但call和apply的区别是什么呢,我们接下来吧代码改动一下:

let xiaowang = {
    name:'小王',
    gender:'男',
    age:22,
    say:function(school,grade){
        console.log('姓名:' + this.name + ' 性别:' + this.gender + ' 年龄: ' + this.age + ' 在: ' + this.school + ' 上:' + this.grade)
    }
}
let xiaohong = {
    name:'小红',
    gender:'女',
    age:22
}
xiaowang.say()

现在我们再来看call和apply的区别:

call方法:

xiaowang.say.call(xiaohong,"实验小学","六年级")

apply方法:

xiaowang.say.bind(xiaohong,["实验小学","六年级"])

看到他们俩的区别了吗？他们的第一个参数上面提到过了。call的后续参数是和say方法中一一对应的;而apply后续的参数是需要传一个数组,数组里面的值才是要和say方法中一一对应的。

bind方法:

上面说过了bind返回的是一个函数我们还需要在调用一次,那么我们可以这样来传参

xiaowang.say.bind(xiaohong,"实验小学","六年级")

也可以这样,在调用的时候传参

xiaowang.say.bind(xiaohong)("实验小学","六年级")

Over!