apply、call、bind的使用

原创 sunshineT 随笔 javascript 361阅读 2017-08-28 18:41:00 举报

偶尔看到写apply,call之类的代码,但每次都是简单的了解就避开了,因为自己用的少,现在拿出来还是有点不自信,感觉有点生疏。
原文地址

刚开始先引入一个面试题

html 代码

现在解释一下:
1.$$(""): 获取页面上所有的dom节点
2.所有的节点是一个类数组,并不是真正的数组,所以他没有forEach方法,但是用call就可以使用数组的call方法
3.后面的那个函数就是forEach的回掉函数,传入所有的dom节点,所有的dom节点都设置上边框线
4.1<<24,意思就是2进制里面的1后面添加24个0,也就是2的24次方,也就是16777216。Math.random()
(1<<24)也就是0到16777216。
5.就相当于是parseInt。比如(11.234)得到的是11。
6.toString(16),就是转成16进制的数。就相当于生成一个颜色值。就如 #FFFFFF。
7.这样页面所有的dom节点都有了一个随机颜色的边框线。你可以把这行代码随便打开一个页面,在console调试里复制回车。

1.在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。html 代码

可以看出 call 和 apply 是为了动态改变 this 而出现的,当一个 object 没有某个方法(本例子中banana没有say方法),但是其他的有(本例子中apple有say方法),我们可以借助call或apply用其它对象的方法来操作。

apply、call 的区别
对于 apply、call 二者而言,作用完全一样,只是接受参数的方式不太一样。例如,有一个函数定义如下:
html 代码

其中 this 是你想指定的上下文,他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象),call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。  

列举一些常用用法:
数组之间追加,array1 值为 [12 , "foo" , {name:"Joe"} , -2458 , "Doe" , 555 , 100]
javascript 代码

获取数组中的最大值和最小值,number 本身没有 max 方法,但是 Math 有,我们就可以借助 call 或者 apply 使用其方法。
javascript 代码

验证是否是数组(前提是toString()方法没有被重写过)
javascript 代码

这里注意,数组也有toString方法,如果直接调用arr.toString(),它返回的是字符串。因为Array 对象覆盖了 Object 的 toString 方法。该字符串由数组中的每个元素的 toString() 返回值经调用 join() 方法连接(由逗号隔开)组成。
javascript 代码

Javascript中存在一种名为伪数组的对象结构。比较特别的是 arguments 对象,还有像调用 getElementsByTagName , document.childNodes 之类的,它们返回NodeList对象都属于伪数组。不能应用 Array下的 push , pop 等方法。但是我们能通过 Array.prototype.slice.call 转换为真正的数组的带有 length 属性的对象,这样 domNodes 就可以应用 Array 下的所有方法了。
html 代码

这里注意一下使用slice方法,他会把类数组转化成真正的数组。

深入理解运用apply、call
javascript 代码

上面方法可以解决最基本的需求,但是当传入参数的个数是不确定的时候,上面的方法就失效了,这个时候就可以考虑使用 apply 或者 call,注意这里传入多少个参数是不确定的,所以使用apply是最好的,方法如下:
javascript 代码

接下来的要求是给每一个 log 消息添加一个"(app)"的前辍,比如:log("hello world"); //(app)hello world
该怎么做比较优雅呢?这个时候需要想到arguments参数是个伪数组,通过 Array.prototype.slice.call 转化为标准数组,再使用数组方法unshift,像这样:
html 代码

bind 详解

说完了 apply 和 call ,再来说说bind。bind() 方法与 apply 和 call 很相似,也是可以改变函数体内 this 的指向。
MDN的解释是:bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

直接来看看具体如何使用,在常见的单体模式中,通常我们会使用 _this , that , self 等保存 this ,这样我们可以在改变了上下文之后继续引用到它。 像这样:
html 代码

由于 Javascript 特有的机制,上下文环境在 eventBind:function(){ } 过渡到 $('.someClass').on('click',function(event) { }) 发生了改变,上述使用变量保存 this 这些方式都是有用的,也没有什么问题。当然使用 bind() 可以更加优雅的解决这个问题:
html 代码

在上述代码里,bind() 创建了一个函数,当这个click事件绑定在被调用的时候,它的 this 关键词会被设置成被传入的值(这里指调用bind()时传入的参数)。因此,这里我们传入想要的上下文 this(其实就是 foo ),到 bind() 函数中。然后,当回调函数被执行的时候, this 便指向 foo 对象。再来一个简单的栗子:
javascript 代码

这里我们创建了一个新的函数 func,当使用 bind() 创建一个绑定函数之后,它被执行的时候,它的 this 会被设置成 foo , 而不是像我们调用 bar() 时的全局作用域。
有个有趣的问题,如果连续 bind() 两次,亦或者是连续 bind() 三次那么输出的值是什么呢?像这样:
javascript 代码

答案是,两次都仍将输出 3 ,而非期待中的 4 和 5 。原因是,在Javascript中,多次 bind() 是无效的。更深层次的原因, bind() 的实现,相当于使用函数在内部包了一个 call / apply ,第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。

  
apply、call、bind比较
那么 apply、call、bind 三者相比较,之间又有什么异同呢?何时使用 apply、call,何时使用 bind 呢。简单的一个栗子:
javascript 代码

三个输出的都是81,但是注意看使用 bind() 方法的,他后面多了对括号。

也就是说,区别是,当你希望改变上下文环境之后并非立即执行,而是回调执行的时候,使用 bind() 方法。而 apply/call 则会立即执行函数

apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;
apply 、 call 、bind 三者都可以利用后续参数传参;
bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复