JavaScript中的call、apply、bind函数的区别

一、共同点：

1.都可以用于修改this的绑定对象

2.第一个参数是要绑定的对象

3.还可以给函数传参

二、不同点

1.修改this的绑定对象

代码

<script>
       const person1 = {
           name: "老王",
           age: 52,
           sex: "男",
           showInfo: function(){
               console.log(`name:${this.name};age:${this.age};sex:${this.sex}`);
           }
       };
       const person2 = {
           name: "小王",
           age: 19,
           sex: "女",
           showInfo: function(){
               console.log(`name:${this.name};age:${this.age};sex:${this.sex}`);
           }
       };
       person1.showInfo();
    </script>

输出结果：

现在调用person1的showInfo()来展示小王的数据，

将上面例子中的person1.showInfo();改为person1.showInfo.call(person2);

运行结果：this的绑定对象已经变为person2了

同理:apply和bind都可以修改this的绑定对象

person1.showInfo.apply(person2);
person1.showInfo.bind(person2)();

apply的用法与call一致，bind需要再加上一对(),因为call和apply直接进行函数调用，bind得到的只是一个函数，加上（）是调用函数

2.传参数

代码

<script>
       const person1 = {
           name: "老王",
           age: 52,
           sex: "男",
           showInfo: function(address,phone){
               console.log(`name:${this.name};age:${this.age};sex:${this.sex};address:${address};phone:${phone}`);
           }
       };
       const person2 = {
           name: "小王",
           age: 19,
           sex: "女",
           showInfo: function(){
               console.log(`name:${this.name};age:${this.age};sex:${this.sex}`);
           }
       };
       person1.showInfo.call(person2,"广东","13112111111");
       person1.showInfo.apply(person2,["广西","15813647952"]);
       person1.showInfo.bind(person2)("海南","13113674589");
    </script>

运行结果

三、总结

1.call、apply、bind的调用方式：call和bind是直接调用函数，bind返回一个函数，需要加()进行调用

 person1.showInfo.call(person);
 person1.showInfo.apply(person);
 person1.showInfo.bind(person2));

2.call、apply、bind传参的方式：call和bind传统传参，apply是传一个数组

 person1.showInfo.call(person2,"广东","13112111111");
 person1.showInfo.apply(person2,["广西","15813647952"]);
 person1.showInfo.bind(person2)("海南","13113674589");

3.三者都可以修改this的绑定对象