JS的深刻认识
JS Function 函数中对于 arguments 的理解
在 JavaScript 中,arguments
是一个特殊的对象,它包含了传递给函数的所有参数。它类似于一个数组,但并不是一个真正的数组,因为它没有继承 Array
类的方法。
同样地,在vue2
中,我们经常使用组件来编写代码,并且通常会通过子组件向父组件传递参数,例如使用this.$emit('event'); this.$emit('event', v1, v2, ...)
这样的方式。根据组件的拆分,我们希望组件的代码保持最小化,即组件只包含它需要的功能,而不应该添加其他不必要的功能。举个例子,我们有一个数字输入框组件,并且有一个包含该数字输入框组件的复选框组件。我们希望通过一个数组来渲染多个这样的组件。这时,我们希望通过输入数字来决定是否选中该组件。因此,数字输入组件只负责输入数字并记录输入的内容,而不是修改数据。其他功能,例如需要知道是哪个复选框输入的值,由外部复选框组件来处理。这时可以使用this.$emit('event', val)
来仅返回数字输入组件的值,而不知道是第几个复选框输入的。这时可以通过@event="callback(...arguments, index)"
来传递额外的下标参数给回调函数。这样就不需要修改数字输入组件,并且这种写法的好处在于,如果数字输入组件只传递了一个参数,而以后又需要传递其他参数,由于callback(val, index){}
中始终使用第一个参数 val,后续添加的 v2、v3 等参数不需要再考虑,也不会影响原有的逻辑。