JavaScript’s call v apply v bind

发布时间:2016-12-6 13:52:02 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"JavaScript’s call v apply v bind",主要涉及到JavaScript’s call v apply v bind方面的内容,对于JavaScript’s call v apply v bind感兴趣的同学可以参考一下。

原作者:Kristina Brainwave 发布时间: 2014-2-15 原文:https://medium.com/the-javascript-collection/9e6122cde639 翻译:子毅- - - - - 将JavaScript进行到底 Function 构造函数原型有三个 允许函数在一个特殊的上下文下调用的方法:call,apply 和 bind。这三个方法用得很普遍并且及其有用。但要理解它们之间的差异具有一定的难度,这使得运用它们变得很困难。本篇文章用不同的例子来帮助大家更好地理解call,apply和bind。 在每一小部分的结束都有一个"实现方法”的链接,这些链接是我对call,apply和bind的重新实现代码,为什么要这么做呢?我认为要充分理解编程概念的方法是重新实现它。为了验证你是否彻底理解了这三个方法,我建议你用JavaScript重新实现它们。我提供了我实现的方法,但是在你尝试之前最好不要偷看;) Function.prototype.call 1.语法: fn.call(this,[argument1, argument2...] 2.定义: 'call'在一个特殊的'this'对象的上下文下立即调用函数,它需要至少一个实参来指定上下文,其他一连串额外参数传递给被调用的函数作为参数。 3.用法: 在知道被调函数实参的情况下,'call‘特别有用。例如当你想在每个项目上调用函数然后得到一个集合。   一个'call'的用法是underscore.js中的_.first函数,_.first函数有两个参数,一个是数组,一个是数字n,它返回一个包含传入数组前n项的新数组。'call'在传入数组的上下文下调用JavaScript的slice方法,它始终向'slice'传递两个预定的参数,一个数组起始索引,一个结束索引。 实现方法:https://gist.github.com/kbrainwave/7063179(为了方便,译者把其代码放在下面) var call = function(fn, context) { var args = Array.prototype.slice.call(arguments, 2).join(‘,’),//将fn,context后面的参数转换成以','为分隔的字符串; result; context.fn = fn; result = eval(“context.fn(“+ args +”)”); delete this.fn; return result; }; Function.prototype.apply 1.语法: fn.apply(this,[argumentArray]); 2.定义: 传递给'apply'的第一个参数作为被调用函数的上下文,第二个(可选的)参数是一个数组,它将被传递给被调用函数,这是'call'和'apply'的重要区别。在JavaScript中,一连串参数是固定的,然而,以数组作为参数是非常灵活的。这使得'apply’具有很大的灵活性。 3.用法: 当大量不确定的参数传递给函数时,'apply'将非常有用。普遍用法时将JavaScript的arguments对象传给被调用函数。 一个'apply'的用法是underscroe.js的_.once。_.once以一个函数作为参数,返回一个只能一次性调用的修订版函数。在我的_.once实现中,使用'apply'使得传递个_.once的函数可接受任意数量的参数。 实现方法:https://gist.github.com/kbrainwave/7064078 var apply = function(fn, context) { var args = Array.prototype.slice.call(arguments, 2), result; context.fn = fn; result = context.fn(args); delete this.fn; return result; }; Function.prototype.bind 1.语法: fn.bind(context,[argument1, argument2...]) 2.定义: 'bind'将一个函数绑定至一个特殊的上下文,并返回包装后的函数。'call'和'apply’立即调用一个函数,然而'bind'返回一个函数,稍后可在正确的上下文中调用这个函数。 3.用法: 'bind'有延时调用函数的能力,这个特性在事件处理和定时器中特别有用。在下面的例子中,我用'bind'在一个特殊的对象下调用定时器,而不是在window上下文下调用(默认的定时器上下文)。 实现方法:https://gist.github.com/kbrainwave/7064111 var bind = function(fn, context) { var args = Array.prototype.slice.call(arguments, 2); return function() { //将argumlents转化成真正的数组后和args链接成一个数组 return fn.apply(context, args.concat(Array.prototype.slice.call(arguments))); }; }; 性能差异 如果你想更深入参与讨论,请随时检查我的jsperf比较call,apply,bind之间的性能差异。并思考为什么它们的性能会有如此大的差异?想分享你的实现?请在评论栏留下你的所有想法。 Until next time! 注:带下划线的地方是译者拿捏不准的,在浏览时请参照原文。这是第一篇译文,希望以后会有更多

上一篇:C语言中位移位运算符
下一篇:队列与栈_栈结构的应用

相关文章

相关评论