js apply Array方法的借用

Question

 let arr1 = [1,2,3]

 let arr2 = [4,5,6]

 //    arr1.push(arr2)

 //    console.log(arr1)

 Array.prototype.push.apply(arr1,arr2)

 console.log(arr1)
 

在上述代码中，为了实现数组push的值为数组这种情况，采用的是Array.prototype.push.apply(arr1,arr2) 这样的方式。

我在控制台打印了下下面两个方法，发现输出的方法都是一样的
既然arr1.push和Array.prototype.push的方法是一样的，为什么要借用Array.prototype.push这个方法呢?还有为什么Array.prototype.push这种方法可以实现数组push数组的功能，而arr本身的push方法却不能实现呢？

Answer 1

因为 apply 方法接收一个数组作为参数

fn.apply(obj, [1,2,3])等同于obj.fn(1,2,3)

实际上，这种写法更多的见于祖传代码
现代js有可读性更好的写法

[1,2,3].push(...[4,5,6])

Answer 2

数组对象原生push方法接受的参数是一个参数列表，它不会自动把数组扩展成参数列表，使用apply的写法可以将数组型参数扩展成参数列表，这样合并两个数组就可以直接传数组参数了。
其实还有一个类似的处理方式就是：

arr1.push.apply(arr1,arr2)

Answer 3

为什么要借用的原因在于push接受的参数格式是target.push(value1, value2,value3......)
每个要push进去的值是以单个单个参数显示传入的，如果你要push的是一个数组里的所有值，那么显然你需要把这个数组的值全部取出来push, 如果你知道数组有几个那么就可以target.push(arr[0],arr[1],arr[2])显然这样很麻烦，你也可以写一个for循环去push，但这样就多了一个循环语句。在es6之后你可以使用扩展符...来简化这一逻辑target.push(...arr) 但是你需要考虑浏览器的兼容性，故而你不可以在生产中使用这一特性，通常会借助babel来转译你的代码，如果你没有借助工具又想简化代码，那就需要借助apply,因为fn.apply的第二个参数是一个数组，它会将其展开以单个参数单个参数的形式调用函数fn。所以Array.prototype.push.apply(arr1,arr2)的意思是以arr1作为上下文调用push方法，并将arr2中的值按顺序作为参数传入。这样就实现了扩展符...的效果。