js中call、apply、bind的用法2015-05-26今天看博客时,看到了这样的一段js代码:var bind = Function.prototype.call.bind(Function.prototype.bind);我想突然看到这样的一段代码,即使js能力再强的人,可能也需要花点时间去理解。像我这样的菜鸟就更不用说了。其实,原文已经对这端代码做出了解释,但我还是想用我的想法去解释这段代码。上面那段代码涉及到了call、bind,所以我想先区别一下call、apply、bind的用法。这三个方法的用法非常相似,将函数绑定到上下文中,即用来改变函数中this的指向。举个例子:
var zlw = {name: "zlw",sayHello: function (age) { console.log("hello, i am ", this.name + " " + age " years old"); }};varxlj = {name: "xlj",};zlw.sayHello(24);// hello, i am zlw 24 years old下面看看call、apply方法的用法:zlw.sayHello.call(xlj, 24);// hello, i am xlj 24 years oldzlw.sayHello.apply(xlj, [24]);// hello, i am xlj 24 years old结果都相同。从写法上我们就能看出二者之间的异同。相同之处在于,第一个参数都是要绑定的上下文,后面的参数是要传递给调用该方法的函数的。不同之处在于,call方法传递给调用函数的参数是逐个列出的,而apply则是要写在数组中。我们再来看看bind方法的用法:zlw.sayHello.bind(xlj, 24)(); //hello, i am xlj 24 years oldzlw.sayHello.bind(xlj, [24])(); //hello, i am xlj 24 years oldbind方法传递给调用函数的参数可以逐个列出,也可以写在数组中。bind方法与call、apply最大的不同就是前者返回一个绑定上下文的函数,而后两者是直接执行了函数。由于这个原因,上面的代码也可以这样写:zlw.sayHello.bind(xlj)(24); //hello, i am xlj 24 years oldzlw.sayHello.bind(xlj)([24]); //hello, i am xlj 24 years oldbind方法还可以这样写 fn.bind(obj, arg1)(arg2) 。用一句话总结bind的用法:该方法创建一个新函数,称为绑定函数,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。现在回到开始的那段代码:var bind = Function.prototype.call.bind(Function.prototype.bind);我们可以这样理解这段代码:var bind = fn.bind(obj)fn 相当于 Function.prototype.call , obj 相当于 Function.prototype.bind 。而 fn.bind(obj) 一般可以写成这样 obj.fn ,为什么呢?因为 fn 绑定了 obj , fn 中的 this 就指向了 obj 。我们知道,函数中 this 的指向一般是指向调用该函数的对象。所以那段代码可以写成这样:var bind = Function.prototype.bind.call;