javascript，如何理解函数原型链上的apply()方法？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文介绍另外一个相对很常见的函数调用的写法：.apply()，这个.apply()和上一篇文章里面.call()又有什么样的区别呢？又有什么样的使用姿势呢？本文依然非常容易看懂，依然是后续文章的铺垫文章，高手请飘过。

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文描述javascript编程中，.apply()方法的用法。测试环境：node@16.14.2。

基本思路

基本上这个.apply()和.call()是一样的，区别非常不明显。如果已经熟悉了.call()的使用方法的话，.apply()和.call()的最大区别就是：参数不是单个传递的，而是数组形式打包传递的。

参考代码如下，输出都是3：

function test(a, b) {
    return a + b;
}
console.log(test(1, 2));              //3
console.log(test.call("", 1, 2));     //3
console.log(test.apply("", [1, 2]));  //3

函数体需要两个参数a和b，

• .call()除了第一个空参数外，后面的就按要求传递a和b。
• .apply()除了第一个空参数外，后面的把需要传递a和b打包成array传递。

修改this.指向

和.call()一样，.apply()的第一个参数也是修改this指向的。
下面拿一个对象变量做例子，来说明问题。参考代码：

var sunan = {
    c: 3,
    test: function (a, b) {
        return a + b + this.c;
    }
}
console.log(sunan.test(1, 2));                    // 6
console.log(sunan.test.call( { c: 5 },  1, 2 ));  // 8
console.log(sunan.test.apply({ c: 5 }, [1, 2]));  // 8

在这个例子里面，.apply()的第一个参数，传入了一个新的对象，它覆盖了原有的数据。

可能的错误

也许会碰到下面的错误提示信息：

TypeError: CreateListFromArrayLike called on non-object

解决方案就是把参数打包成数组[]，进行传递。

相关链接

• https://newsn.net/say/js-call.html
• https://newsn.net/say/js-hook.html
• https://newsn.net/say/js-array-map.html
• https://newsn.net/say/js-functools-partial.html

总结

函数.apply()，任何函数或方法都可以执行。其第一个参数可以传入一个对象改变函数体里面的this.。如果函数是个不涉及this.的函数。那么，第一个参数就可以随便传递，写啥都可以，不影响逻辑。

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。