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

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

举个例子，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，若我需要将次事件绑定到点击 标签时，则

HTML

<spna>点击span>

js

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

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

以上。