前端.call/apply/bind的作用和区别

最新推荐文章于 2025-07-01 10:42:28 发布

原创最新推荐文章于 2025-07-01 10:42:28 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #call #apply #bind #绑定

前端专栏收录该内容

11 篇文章

订阅专栏

本文通过一个具体示例，深入探讨了JavaScript中call、apply及bind方法的使用场景及其区别。重点讲解了这三种方法如何帮助解决对象间方法借用的问题，并分别介绍了它们的特点：即时执行与延迟执行的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在了解一个东西前，先需要了解这个东西为什么需要被创造出来

举个例子，ex：

<script>
    var a = {
        name : "fang" ,
        setName : (name) => {
            console.log(name)
        }
    }
    var b = {
      name : "zz"
    }
    a.setName.call(b,b.name)
</script>

如码所示，在a中有setName方法，但是b中没有，此时若b要调用setName方法，在b中复写一次setName方法，就显得很尴尬，此时就能调用call、apply、bind来实现了

区别：
同样是上面这个demo，若在apply中实现则要

<script>
    var a = {
        name : "fang" ,
        setName : (name) => {
            console.log(name)
        }
    }
    var b = {
      name : "zz"
    }
    a.setName.apply(b,[b.name]) 
    //apply中只能有两个参数，第一个参数表示引用单位变量名，第二个参数需以数组形式
</script>

此上两种方法，实际作用都是【对象b】调用【对象a】的方法；都是修改了setName中this的指向；都是马上进行运行，急打开页面时控制台就会马上出现 “zz”

但是若需求并不是“马上”调用，如果是需要触发一个条件后再调用呢？
bind就是拿来解决这种情况的

一样是上面那个demo，若我需要将次事件绑定到点击 <span>标签时，则

HTML

<spna>点击</span>

<script>
    var a = {
        name : "fang" ,
        setName : (name) => {
            console.log(name)
        }
    }
    var b = {
      name : "zz"
    }
    document.querySelector('span').onclick = a.setName.bind(b,b.name)
</script>

bind的作用是引用注意区别于调用

即它并不是马上进行运行，控制台上不会马上打印“zz”，只有在绑定到触发事件上时，被触发了，才会调用。例如这里的点击一次，打印一次

以上。