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拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
JS代码优化的8点建议
Feb 04 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 求质素(素数) 的实现代码
2011/04/12 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
YII框架http缓存操作示例
2019/04/29 PHP
拖动一个HTML元素
2006/12/22 Javascript
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python魔法方法-自定义序列详解
2016/07/21 Python
python机器学习之神经网络(二)
2017/12/20 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
Java提供了哪些企业应用编程接口
2015/02/13 面试题
关于打架的检讨书
2014/01/17 职场文书
委托公证书
2014/04/08 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
企业年检委托书范本
2014/10/14 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
宣传稿格式范文
2015/07/23 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python