call和apply及bind三者的区别（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



   




   




  、相同点

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

2 



 



 

、不同点

call和bind传参相同  




  




  



，多个参数依次传入的； apply只有两个参数


  


  


，第二个参数为数组； call和apply都是对函数进行直接调用     
     
    ，而bind方法不会立即调用函数   




   




   


，而是返回一个修改this后的函数    




    




    

。