JS 中bind、call、apply的区别

一、bind、call、apply的作用

关于call、apply、bind修饰的函数，用来修改函数的执行上下文(this)。

1.call用法

调用fn.call时会将fn中的this指向修改为传入的第一个参数，将后面的参数传入给fn,并立即执行函数fn。

let obj = {
        name: "张三",
        age: 24,
        sayHello: function (job, hobby) {
            console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job}，我的爱好是: ${hobby}。`);
        }
    }
    obj.sayHello('程序员', '看美女'); // 我叫张三,今年24岁。我的工作是: 程序员，我的爱好是: 看美女。


    let obj1 = {
        name: "李四",
        age: 30
    }
    // obj1.sayHello(); // Uncaught TypeError: obj1.sayHello is not a function
    obj.sayHello.call(obj1, '敲代码', '唱歌'); // 我叫李四,今年30岁。我的工作是: 敲代码，我的爱好是: 唱歌。

2.apply用法

fn.apply的作用和call相同：修改this指向，并立即执行fn。区别在于传参形式不同，apply接受两个参数，第一个参数是要指向的this对象，第二个参数是一个数组，数组里面的元素会被展开传入fn,作为fn的参数。

let obj = {
        name: "张三",
        age: 24,
        sayHello: function (job, hobby) {
            console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job}，我的爱好是: ${hobby}。`);
        }
    }
    obj.sayHello('程序员', '看美女'); // 我叫张三,今年24岁。我的工作是: 程序员，我的爱好是: 看美女。


    let obj1 = {
        name: "李四",
        age: 30
    }
    
    obj.sayHello.apply(obj1, ['设计师', '画画']); // 我叫李四,今年30岁。我的工作是: 设计师，我的爱好是: 画画。

3.bind的用法

fn.bind的作用是只修改this指向，但不会立即执行fn；会返回一个修改了this指向后的fn。需要调用才会执行:bind(thisArg, arg1, arg2, arg3, ...)()。bind的传参和call相同。

    let obj = {
        name: "张三",
        age: 24,
        sayHello: function (job, hobby) {
            console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job}，我的爱好是: ${hobby}。`);
        }
    }
    // obj.sayHello('程序员', '看美女'); // 我叫张三,今年24岁。我的工作是: 程序员，我的爱好是: 看美女。

    let obj1 = {
        name: "李四",
        age: 30
    }
    
    obj.sayHello.bind(obj1, '设计师', '画画'); // 无输出结果
    obj.sayHello.bind(obj1, '设计师', '画画')(); // 我叫李四,今年30岁。我的工作是: 设计师，我的爱好是: 画画。

二、bind、call、apply的区别

相同点：

1. 三个都是用于改变this指向；
2. 接收的第一个参数都是this要指向的对象；
3. 都可以利用后续参数传参。

不同点：

1. call和bind传参相同，多个参数依次传入的；
2. apply只有两个参数，第二个参数为数组；
3. call和apply都是对函数进行直接调用，而bind方法不会立即调用函数，而是返回一个修改this后的函数。

三、call、apply的使用

（1）执行时一个对象可以使用另一个对象的方法

function Doctor(){
    this.name = "Doctor";
    this.say = function(){
        console.log(this.name);
    }
}
function Stephen(){
    this.name = "Stephen Strange";
}
var doctor = new Doctor();
var stephen = new Stephen();
// 通过call将stephen对象传入doctor的say方法，此时say方法中的this被指向stephen对象
doctor.say.call(stephen);       //Stephen Strange

（2）实现继承

function Doctor(name){
    this.name = name;
    this.say = function(){
        console.log(this.name)
    }
}
function Stephen(name){
    //当前函数内的this指向函数Son的实例化对象
    //在执行Stephen时执行Doctor，同时将Doctor内的this改变成Stephen的this
    Doctor.call(this,name)
}

var doctor = new Doctor("Doctor")
doctor.say();       //Doctor
var stephen = new Stephen("Stephen Strange")
// 在Stephen中并没有say方法，但是因为在new Stephen时，执行了Doctor，
// 并将Doctor中的this指向Stephen的this，
// 那么在new Stephen后，得到的实例，也具有了Doctor内的属性和方法
stephen.say();      //Stephen Strange

（3）实现多继承

function People(){
    this.say = function(){
        console.log(`My name is ${this.name}. I will have ${this.attr} ${this.skill}.`)
    }
}
function Doctor(){
    this.skill = "cure";
}
function Magic(){
    this.attr = "Amazing";
}
function Stephen(name){
    this.name = name;
    // 执行其他函数的同时将原函数的this指向都改成Stephen的this，此时所有属性和方法可以互相访问
    People.call(this);
    Doctor.call(this);
    Magic.call(this);
}
var stephen = new Stephen("Stephen Strange");
stephen.say();      //My name is Stephen Strange. I will have Amazing cure.

四、总结

call和apply方法的功能：修改原函数的this指向，并执行这个新函数。call和aply的第二个（或大于2个）参数为fn传入的参数

bind和call/apply的功能类似，只不过bind修改this指向之后，返回的新函数不会自动执行，如果有需要，需要手动执行；而call和apply改变this之后，返回的新函数会自动执行。