bind、call、apply 区别

一、bind、call、apply的作用

关于call、apply、bind函数，它们主要用来改变this指向的，在很多框架中常有用到，而且也是面试官喜欢问到的问题：多数会问道三者的区别， 以及手动实现它们。

call的用法

fn.call(thisArg, arg1, arg2, arg3,...)

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

let obj ={name:"xiaoming",age:24,sayHello:function(job, hobby){
            console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job}，我的爱好是: ${hobby}。`);}}
    obj.sayHello('程序员','看美女');// 我叫xiaoming,今年24岁。我的工作是: 程序员，我的爱好是: 看美女。let obj1 ={name:"lihua",age:30}// obj1.sayHello(); // Uncaught TypeError: obj1.sayHello is not a function
    obj.sayHello.call(obj1,'设计师','画画');// 我叫lihua,今年30岁。我的工作是: 设计师，我的爱好是: 画画。

上面的代码中，我们obj1对象也想使用obj对象中的sayHello方法；我们就可以使用call方法调用obj.sayHello, 并将obj.sayHello中的this修改为obj1，把 ‘设计师’, ‘画画’ 这两个参数出给obj.sayHello。

apply的用法

apply(thisArg,[argsArr])

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

let obj ={name:"xiaoming",age:24,sayHello:function(job, hobby){
            console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job}，我的爱好是: ${hobby}。`);}}
    obj.sayHello('程序员','看美女');// 我叫xiaoming,今年24岁。我的工作是: 程序员，我的爱好是: 看美女。let obj1 ={name:"lihua",age:30}
    
    obj.sayHello.apply(obj1,['设计师','画画']);// 我叫lihua,今年30岁。我的工作是: 设计师，我的爱好是: 画画。

bind的用法

bind(thisArg, arg1, arg2, arg3,...)

**fn.bind的作用是只修改this指向，但不会立即执行fn；会返回一个修改了this指向后的fn。需要调用才会执行:

bind(thisArg, arg1, arg2, arg3, ...)()

。bind的传参和call相同。**

let obj ={name:"xiaoming",age:24,sayHello:function(job, hobby){
            console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job}，我的爱好是: ${hobby}。`);}}// obj.sayHello('程序员', '看美女'); // 我叫xiaoming,今年24岁。我的工作是: 程序员，我的爱好是: 看美女。let obj1 ={name:"lihua",age:30}
    
    obj.sayHello.bind(obj1,'设计师','画画');// 无输出结果
    obj.sayHello.bind(obj1,'设计师','画画')();// 我叫lihua,今年30岁。我的工作是: 设计师，我的爱好是: 画画。

二、bind、call、apply的区别

1、相同点

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

2、不同点

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