位置: 编程技术 - 正文
JS中使用apply、bind实现为函数或者类传入动态个数的参数(js中的apply方法)
编辑：rootadmin推荐整理分享JS中使用apply、bind实现为函数或者类传入动态个数的参数(js中的apply方法)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js apply 实现原理,js中的apply方法,js如何使用,js中apply的用法,js中apply的用法,Js中使用@if shiro,js实现apply函数,js中apply的用法,内容如对您有帮助，希望把文章链接给更多的朋友！
为纪念年没写blog，第一篇博文就以这样一个有趣的窍门开始吧 -___-
在ES5中，当我们调用一个函数时，如果要传入的参数是根据其他函数或条件判断生成的，也就是说不确定会传入多少个参数时，在不改变原函数的情况下该如何办呢？
(当然了，能避免此文所述情况发生就尽量避免，比如将参数改为object或array等等)
大部分人可能知道用apply能完美解决这个问题：
apply与call一样会将第一个参数作为函数的调用对象，即改写了调用函数内的this指针为第一个参数，如果不是对象的方法，可以不考虑this，传入一个null即可。
而不同之处在于后面的参数，apply将所有要传入调用函数的参数放在一个数组中，call是与原函数一样依次追加进去。
既然是数组那就可控了，根据其他函数或逻辑判断来生成数组，可达到传入动态个数参数的目的。
但是我遇到一个头疼的问题，要在用new创建对象时传入动态个参数，几年才遇到一次的问题：
如果是用ES6，有了rest参数，上述问题全都不是问题。注意，数组args前面加三个点并不是语法错误，而是ES6提供的rest参数写法，你可以理解为将...args替换为args数组去掉方括号后的字符。
但ES5里真的就没有办法实现了吗？毕竟ES6大部分都是语法糖，可以用babel一类的工具编译为ES5，带着疑问，我们就用babel编译一下看看得到什么：
看到最后一行惊呆了，别害怕，让我们分析一下这句代码。首先肢解一下，分三步来看：
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);
AngularJS实现textarea记录只能输入规定数量的字符并显示 AngularJS是一个MV*框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定
Bootstrap表单组件教程详解 表单常见的元素主要包括：文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。下面是不同的bootstrap版本：LESS:forms.lessSASS:_forms.scssbootstrap仅
js 求时间差的实现代码 vardate1=newDate();//开始时间vardate2=newDate();//结束时间vardate3=date2.getTime()-date1.getTime()//时间差的毫秒数//计算出相差天数vardays=Math.floor(date3/(**))//计算
标签: js中的apply方法
本文链接地址:https://www.jiuchutong.com/biancheng/373344.html 转载请保留说明！