JS中利用apply与bind实现动态参数传递

为了纪念十年未更新博客，这篇博文以一个有趣的技术技巧开篇。

ES5中动态传参的挑战

在ES5环境中，当我们需要根据其他函数执行结果或条件判断来动态生成参数，且不确定具体传入多少个参数时，若要保持原函数定义不变，该如何处理？

当然，在实际开发中，如果能通过修改参数结构（如改为对象或数组）来避免此类情况，应优先选择更优的设计方案。

利用apply处理动态参数

许多开发者知道，使用apply方法可以完美解决这一难题。

apply和call的作用相同，都是将第一个参数作为函数的调用对象，即把函数内部的this指针指向该参数。如果调用不是对象的方法，可以忽略this，直接传入null即可。

两者的主要区别在于后续参数的传递方式：apply要求将所有要传入调用函数的参数封装在一个数组中，而call则是将参数与原函数定义一样依次追加列出。

既然参数可以封装为数组，那么我们就可以通过其他函数或逻辑判断来动态生成这个数组，从而实现传入动态个数参数的目的。

构造函数动态传参的解决方案

然而，我曾遇到一个棘手的问题：在使用new关键字创建对象实例时，需要传入动态数量的参数。这是一个几年才可能遇到一次的特殊场景。

ES6 Rest参数与ES5编译机制

如果使用ES6标准，引入了Rest参数（剩余参数）语法，上述问题便迎刃而解。需要注意的是，在数组args前加三个点（...）并非语法错误，而是ES6提供的Rest参数写法。你可以将其理解为将...args展开替换为args数组去掉方括号后的内容。

那么在ES5中是否真的无法实现呢？考虑到ES6的大多数新特性本质上是语法糖，可以通过Babel等工具编译为ES5代码。带着这个疑问，我们使用Babel编译上述代码，观察其生成的结果。

看到最后一行代码时可能会感到惊讶，但不要惊慌，让我们逐步分析这句代码。首先将其拆解为三个步骤来看：

第一步，毫无疑问，使用concat方法将null与我们的参数连接成一个新数组，作为apply方法的第二个参数，从而得到[null, 1, 2, 3]。

第二步，执行apply操作。此时，第一个参数Foo将取代Function来调用原生的bind方法，而第二个参数数组的内容将作为bind方法的参数传入，即得到Foo.bind(null, 1, 2, 3)。

第三步，bind方法的第一个参数与apply、call类似，用于修改this指针；而后面的参数可以为函数植入默认的前置参数值（preset leading argument）。也就是说，当bind执行完毕后，在第一组小括号内我们得到了一个已经注入了三个参数值的Foo类，暂且称之为FooWithArgs。

最终，当我们执行 new FooWithArgs(); 时，就不需要再传入任何参数了。这等同于直接执行 new Foo(1, 2, 3);。