call apply bind (三兄弟)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

大家好,我是大帅子,今天给大家讲一下 call apply bind 这三兄弟的语法以及注意事项吧

---

概括

首先这三个都会修改this的指向,除了这一点很统一,其他的都是不同的功能,各司其职

1. call

1. 语法 :
   

   函数名.call(修改后的this,实参1,实参2........)
   

2. 直接看梨子

   // 我们先声明一个函数
   function fn(a,b){
       console.log(this)
       let sum = a+b  
       console.log(sum)
   }
   
    fn.call({name:'niu'},1,2)
   

3. ok 我们直接看打印的结果,修改this成功

2. apply

1. 语法 :
   

   函数名.apply(修改后的this,数组/伪数组)
   

2. 梨子

    // 我们先声明一个函数
   function fn(a,b){
       console.log(this)
       let sum = a+b  
       console.log(sum)
   }
   
    fn.apply({name:'ma'},[10,20,30])
   

3. ok 我们直接看打印的结果,修改this成功

3. bind

1. 语法 :
   

   函数名.call(修改后的this,实参1,实参2........)
   

2. 梨子

    // 我们先声明一个函数
   function fn(a,b){
       console.log(this)
       let sum = a+b  
       console.log(sum)
   }
   
    fn.bind({name:'niuma'},100,200)
   

我们这个时候思考一下,为什么bind语法跟call的语法一样,那为什么还要有bind呢是吧?

3. 打印看一下我们控制台是空的,这就是bind的作用

bind 不会立即执行函数,而是将得到一个修改this之后的新参数

小细节: 如果bind传递了参数,则传递的参数也会绑定,之后调用的时候再去传参数就不起作用,如果不绑定参数,后续就可以直接传参数使用

4. 我们既然知道了bind的特性,我们直接重新调用一下

   let newFn = fn.bind({name:'niuma'},100,200)
   newFn()
   

总结

最后我们总结一下函数上下文三种调用方式的区别 :

我精简了一下,主要就是分为两个不同:

1. 传参的方式不同: call,bind用于单个参数,apply就用于传递多个参数
2. 执行的机制不同: call,apply立即执行,bind不会立即执行,而是copy一份函数

bind多数用于修改定时器的this指向,因为定时器的this默认指向window

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!