apply和call方法以及bind

每个函数都包含两个非继承而来的方法：apply()和call()。；

call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性；作用 call（）方法和apply（）方法的作用相同：改变this指向。

区别他们的区别在于接收参数的方式不同：

call（）：第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。在使用call（）方法时，传递给函数的参数必须逐个列举出来。

apply（）：传递给函数的是参数数组如下代码做出解释：

function add(c, d){ r

eturn this.a + this.b + c + d;

}

var o = {a:1, b:3};

add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

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

举个例子，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”，只有在绑定到触发事件上时，被触发了，才会调用。例如这里的点击一次，打印一次