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