JS中使用apply、bind实现为函数或者类传入动态个数的参数


Posted in Javascript onApril 26, 2016

为纪念10年没写blog,第一篇博文就以这样一个有趣的窍门开始吧 -___-

在ES5中,当我们调用一个函数时,如果要传入的参数是根据其他函数或条件判断生成的,也就是说不确定会传入多少个参数时,在不改变原函数的情况下该如何办呢?

(当然了,能避免此文所述情况发生就尽量避免,比如将参数改为object或array等等)

JS中使用apply、bind实现为函数或者类传入动态个数的参数

大部分人可能知道用apply能完美解决这个问题:

JS中使用apply、bind实现为函数或者类传入动态个数的参数

apply与call一样会将第一个参数作为函数的调用对象,即改写了调用函数内的this指针为第一个参数,如果不是对象的方法,可以不考虑this,传入一个null即可。

而不同之处在于后面的参数,apply将所有要传入调用函数的参数放在一个数组中,call是与原函数一样依次追加进去。

JS中使用apply、bind实现为函数或者类传入动态个数的参数

既然是数组那就可控了,根据其他函数或逻辑判断来生成数组,可达到传入动态个数参数的目的。

但是我遇到一个头疼的问题,要在用new创建对象时传入动态个参数,几年才遇到一次的问题:

JS中使用apply、bind实现为函数或者类传入动态个数的参数

如果是用ES6,有了rest参数,上述问题全都不是问题。注意,数组args前面加三个点并不是语法错误,而是ES6提供的rest参数写法,你可以理解为将...args替换为args数组去掉方括号后的字符。

JS中使用apply、bind实现为函数或者类传入动态个数的参数

但ES5里真的就没有办法实现了吗?毕竟ES6大部分都是语法糖,可以用babel一类的工具编译为ES5,带着疑问,我们就用babel编译一下看看得到什么:

JS中使用apply、bind实现为函数或者类传入动态个数的参数

看到最后一行惊呆了,别害怕,让我们分析一下这句代码。首先肢解一下,分三步来看:

JS中使用apply、bind实现为函数或者类传入动态个数的参数

1. 毫无疑问,用concat将null与我们的参数连接为一个数组,作为apply第二个参数,即得到[null, 1, 2, 3];

2. 让我们运算一下apply,第一个参数Foo会取代Function来调用原生的bind方法,第二个参数数组的内容将作为bind的参数传入,即得到Foo.bind(null, 1, 2, 3);

3. bind方法第一个参数与apply、call类似,修改this指针,而后面的参数可以为函数植入默认的前置参数值(preset leading argument),也就是说当bind执行完后在第一组小括号内我们得到一个已经注入了三个参数值的Foo类,暂且叫FooWithArgs;

最终,当我们 new FooWithArgs(); 时,就不用传入任何参数了。等同于 new Foo(1, 2, 3);

Javascript 相关文章推荐
js getElementsByTagName的简写方式
Jun 27 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
Jul 18 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
js+css3实现旋转效果
Jan 20 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 #Javascript
JavaScript事件处理的方式(三种)
Apr 26 #Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 #Javascript
jQuery siblings()用法实例详解
Apr 26 #Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 #Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 #Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 #Javascript
You might like
PHP 数组入门教程小结
2009/05/20 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
php数组去除空值函数分享
2015/02/02 PHP
php集成动态口令认证
2016/07/21 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
Vue 进阶教程之v-model详解
2017/05/06 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Python 备份程序代码实现
2017/03/06 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
《自选商场》教学反思
2014/02/14 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
劲霸男装广告词
2014/03/21 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
企业消防安全责任书
2014/07/23 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书