js中bind、call、apply函数的用法

http://rangercyh.blog.51cto.com/1444712/1615809

著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：杨志
链接：http://www.zhihu.com/question/20289071/answer/14644278
来源：知乎

在javascript OOP中，我们经常会这样定义：

function cat(){
}
cat.prototype={
food:"fish",
say: function(){
alert("I love "+this.food);
}
}


var blackCat = new cat;
blackCat.say();

但是如果我们有一个对象whiteDog = {food:"bone"},我们不想对它重新定义say方法，那么我们可以通过call或apply用blackCat的say方法：blackCat.say.call(whiteDog);

所以，可以看出call和apply是为了动态改变this而出现的，当一个object没有某个方法，但是其他的有，我们可以借助call或apply用其它对象的方法来操作。

用的比较多的，通过document.getElementsByTagName选择的dom 节点是一种类似array的array。它不能应用Array下的push,pop等方法。我们可以通过：
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
这样domNodes就可以应用Array下的所有方法了。

 

all() 方法和 apply() 方法很类似，它们的存在都是为了改变 this 的绑定，那 call() 和apply() 有什么区别呢？就我个人看来，没啥鸟区别。。。开玩笑！刚刚说了，上面 apply() 接收两个参数，第一个是绑定 this 的值，第二个是一个参数数组，注意它是一个数组，你想传递给这个函数的所有参数都放在数组里，然后 apply() 函数会在调用函数时自动帮你把数组展开。而 call()呢，它的第一个参数也是绑定给 this 的值，但是后面接受的是不定参数，而不再是一个数组，也就是说你可以像平时给函数传参那样把这些参数一个一个传递。所以如果一定要说有什么区别的话，看起来是这样的

1 2 3 4 5 6 7

function a(xx, yy) {         alert(xx, yy);         alert(this);         alert(arguments); } a.apply(null, [5, 55]); a.call(null, 5, 55);

仅此而已。

最后再来说 bind() 函数，上面讲的无论是 call() 也好， apply() 也好，都是立马就调用了对应的函数，而 bind() 不会， bind() 会生成一个新的函数，bind() 函数的参数跟 call() 一致，第一个参数也是绑定 this 的值，后面接受传递给函数的不定参数。 bind() 生成的新函数返回后，你想什么时候调就什么时候调，看下代码就明白了

1 2 3 4 5 6 7 8 9 10

var m = {        "x" : 1 }; function foo(y) {     alert(this.x + y); } foo.apply(m, [5]); foo.call(m, 5); var foo1 = foo.bind(m, 5); foo1();