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 相关文章推荐
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
Java 生成随机字符的示例代码
Jan 13 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
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
js使用心得分享
2015/01/13 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
基于python 处理中文路径的终极解决方法
2018/04/12 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
优秀中专生推荐信
2013/11/17 职场文书
高中生学习计划书
2014/09/15 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
python获取对象信息的实例详解
2021/07/07 Python
vue使用echarts实现折线图
2022/03/21 Vue.js
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript