js中call、apply、bind的用法

今天看博客时，看到了这样的一段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");
     }
};

var  xlj = {
    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 old
zlw.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 old
zlw.sayHello.bind(xlj, [24])(); //hello, i am xlj 24 years old

bind方法传递给调用函数的参数能够逐个列出，也能够写在数组中。bind方法与call、apply最大的不一样就是前者返回一个绑定上下文的函数，然后二者是直接执行了函数。因为这个缘由，上面的代码也能够这样写:

zlw.sayHello.bind(xlj)(24); //hello, i am xlj 24 years old
zlw.sayHello.bind(xlj)([24]); //hello, i am xlj 24 years old

bind方法还能够这样写 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;

你们想想 Function.prototype.call.bind(Function.prototype.bind) 返回的是什么？

console.log(Function.prototype.call.bind(Function.prototype.bind)) // call()

返回的是 call 函数，但这个 call 函数中的上下文的指向是 Function.prototype.bind 。这个 call 函数能够这样用

var bind = Function.prototype.call.bind(Function.prototype.bind);

var zlw = {
 name: "zlw" 
};

function hello () {
  console.log("hello, I am ", this.name);
}

bind(hello, zlw)() // hello, I am zlw

你们可能会感到疑惑，为何是这样写 bind(hello, zlw) 而不是这样写 bind(zlw, hello) ？既然 Function.prototype.call.bind(Function.prototype.bind) 至关于 Function.prototype.bind.call ，那么先来看下 Function.prototype.bind.call 怎么用。 call 的用法你们都知道：

Function.prototype.bind.call(obj, arg)

其实就至关于 obj.bind(arg) 。咱们须要的是 hello 函数绑定对象 zlw ，即 hello.bind(zlw) 也就是 Function.prototype.bind.call(hello, zlw) ，因此应该这样写 bind(hello, zlw) 。

 

如今又有一个疑问，既然 Function.prototype.call.bind(Function.prototype.bind) 至关于 Function.prototype.bind.call ，咱们为何要这么写：

var bind = Function.prototype.call.bind(Function.prototype.bind);

而不直接这样写呢：

var bind = Function.prototype.bind.call;

先来看一个例子：

var name = "xlj";
var zlw = {
    name: "zlw" 
    hello: function () {
        console.log(this.name);
    }
};
zlw.hello(); // zlw

var hello = zlw.hello;
hello(); // xlj

有些人可能会意外， hello() 的结果应该是 zlw 才对啊。其实，将 zlw.hello 赋值给变量 hello ，再调用 hello() ， hello 函数中的 this 已经指向了 window ，与 zlw.hello 再也不是同一个上下文，而全局变量 name 是 window 的一个属性，因此结果就是 xlj 。再看下面的代码：

var hello = zlw.hello.bind(zlw);
hello(); // zlw

结果是 zlw ，这时 hello 函数与 zlw.hello 是同一个上下文。其实上面的疑惑已经解开了，直接这样写：

var bind = Function.prototype.bind.call;

 bind 函数中的上下文已经与 Function.prototype.bind.call 中的不同了，因此使用 bind 函数会出错。而这样写

var bind = Function.prototype.call.bind(Function.prototype.bind);

 bind 函数中的上下文与 Function.prototype.call.bind(Function.prototype.bind) 中是同样的。

 

关于这个这段代码的解释这到这边了，感受语言组织能力不是很好，文章写得有些啰嗦了。文中可能会有错误，但愿你们指正。