js中call、apply、bind的用法

转载 2015年11月18日 17:23:55

今天看博客时,看到了这样的一段js代码:

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

我想突然看到这样的一段代码,即使js能力再强的人,可能也需要花点时间去理解。像我这样的菜鸟就更不用说了。其实,原文已经对这端代码做出了解释,但我还是想用我的想法去解释这段代码。

上面那段代码涉及到了call、bind,所以我想先区别一下call、apply、bind的用法。这三个方法的用法非常相似,将函数绑定到上下文中,即用来改变函数中this的指向。举个例子:

按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

下面看看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) 中是一样的。

 

关于这个这段代码的解释这到这边了,感觉语言组织能力不是很好,文章写得有些啰嗦了。文中可能会有错误,希望大家指正。

JavaScript中bind、call、apply函数用法详解

在给我们项目组的其他程序介绍 js 的时候,我准备了很多的内容,但看起来效果不大,果然光讲还是不行的,必须动手。前几天有人问我关于代码里 call() 函数的用法,我让他去看书,这里推荐用js 写服务...

JavaScript学习笔记apply、call、bind用法说明

JavaScript关键字apply、call、bind用法说明以及示例。

JavaScript中bind、call、apply函数用法详解

关于这三个函数的详细介绍,可以参看 MDN 的文档:bind、call、apply。 下面开始搬砖,修改自我之前在 segmentfault 上的答案: js 里函数调用有 4 种模式:方...

JS中的call、apply、bind方法详解

一、call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调...
  • hj7jay
  • hj7jay
  • 2016年12月13日 14:31
  • 967

!!js中call、apply、bind的用法

今天看博客时,看到了这样的一段js代码: var bind = Function.prototype.call.bind(Function.prototype.bind); 我想突然看到这...
  • WHACKW
  • WHACKW
  • 2015年06月17日 15:00
  • 287

js深入之call、apply和bind模拟实现

call和apply 作用:调用一个对象的一个方法,以另一个对象替换当前对象。 区别:调用参数形式不同。(call参数依次给出,apply通过Array对象传入) this:谁调用我,我就指向谁...

JS中的this指向问题以及apply、call、bind的使用

call和apply的区别和使用 这两个使用的效果都一样,都是改变对象内部this指针的定向 其中 this 是你想指定的上下文,他可以是任何一个 JavaScript 对象(JavaScript 中...

js中this的改变指向的方法:call和apply、bind

在javascript中this是一个特殊的关键词,在不同的场合中this的值也在发生着变化,但是this都是指的是函数调用的对象,就是指函数的调用对象,但是为了实现某种功能,也对改变this的指向提...

apply, call, bind在js中的区别

apply, call, bind在js中的区别在js中,这三种方法都是用来改变函数的this对象的指向的。先看看相似点: 都是用来改变函数的this对象的指向的 第一个参数都是this要指向的对...

使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题

Teddy's  http://www.cnblogs.com/tingyu-blog/p/6212392.html 1、什么是this 在JavaScript中this可...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js中call、apply、bind的用法
举报原因:
原因补充:

(最多只允许输入30个字)