一行代码引发的 JS 探究 : call 和 apply 到底哪个更快?

简介: 如果问到它们之间有什么区别时,你可能会说:传参不同。但你知道它们哪个性能更好吗?

我们都知道 call()apply() 是用来改变函数中 this 指向的,它们的共同点是都会立即执行,而如果问到它们之间有什么区别时,我们都会想到一个「传参不同

call 参数要分开传,比如 call(this, 1, 2, 3, ...)

apply 传递参数是数组形式,比如 apply(this, [1,2,3,...])

以上就是一直以来我对两者的全部认知了,直到有天我在 Vue 的源码中看到了这么一段"无意义"的代码:

image.png

于是我开始猜想,应该是两者之间还存在着不为人知的性能差异?为了佐证这点,赶紧写了个循环试一下:

let arr = [10,12,123,432,54,67,678,98,342]; // 随便定义一些参数
function fn () {}

const name = 'call'
// const name = 'apply'
 
console.time(name);
for (let i = 0; i < 99999999; i++) {
  fn[name](this, ...arr) // call
  // fn[name](this, arr) // apply
}
console.timeEnd(name)
console.timeconsole.timeEnd 是很方便的调试技巧。

测试结果如下:

call 多次运行结果: apply 多次运行结果:
image.png image.png

以上测试是带了参数的,下面不传参数,只绑定this测试下:

call 多次运行结果: apply 多次运行结果:
image.png image.png

从结果看好像差异也不是很明显,当时觉得可能是测试数据比较简单吧(其实并不是,后面会说到),不过从平均值来看,还是感觉 call 稍微比 apply 更稳定一些。

以上两组对照都是在谷歌浏览器下进行的,于是我就想在苹果 Safari 浏览器下会是什么结果呢?

call in Safari apply in Safari
image.png image.png

结果是非常的Amazing啊,首先一模一样的数据规格,Safari的表现比谷歌差了好多,但是想到我的Safari版本可能比较低(MacOS版本10.15.7),所以执行效率差异这个先按下不表,最主要是这个结果怎么跟谷歌是反过来的,反而 apply 要快很多啊?

image.png

一定是我的问题!人一旦清楚认知自己是菜鸟的事实,往往就能很快作出准确的判断。于是我仔细查看刚刚的代码,突然意识到,我在往 call 传参的时候习惯性地使用了 es6展开运算符,在 https://babeljs.io/ 这个网站上看看 babel 会如何处理上面的代码:

image.png

可以看到使用了解构传参的 call 方法经过了 babel 的转译,甚至还多调用了一次 apply,反而变得复杂了,虽然浏览器具体怎么处理我们不得而知,但还是可以看出来解构参数这一步操作的消耗可能蛮大的,于是我改成了正常的传参,像这样:

let arr = [10,12,123,432,54,67,678,98,342];
function fn () {}

const name = 'call'
// const name = 'apply'
 
console.time(name);
for (let i = 0; i < 99999999; i++) {
  fn[name](this, 10,12,123,432,54,67,678,98,342) // call 这里把参数复制下来传参了
  // fn[name](this, arr) // apply
}
console.timeEnd(name)

再重新跑一遍对照,果然Safari的表现就正常了:

call in Safari apply in Safari
image.png image.png

再重新看下谷歌浏览器的对照结果,这下就非常明显了,差距一下拉开了几条街:

call 多次运行结果: apply 多次运行结果:
image.png image.png

到这里我们总算是可以得出结论,call 的性能比 apply 要好。如果上面属于实践出真知,那么下面就该说说原理。在探索过程中我查阅了许多资料,最终还得是 ECMA 上对于两个方法的规范提案解答了我的疑惑,虽然不同的浏览器对于JS规范做出的具体实现是不一样的,但毕竟都遵循着同样的规范,通过它我们就能看清楚本质。

Call Apply
image.png image.png

从规范中我们不难看出,apply 在处理参数上很明显比 call 多了两个步骤,但它们却都调用了同一个方法 PrepareForTailCall,而且返回的结果也是同个方法只不过传的第三个参数略有不同而已,所以具体的实现上肯定也是 call 比较纯粹,而 apply 则只是为了方便传递参数而创造的方法,这足以证明 call 性能要优于 apply

说到底 callapply 到底哪个更快,究竟选择哪个对我们日常工作的产出或许并无多少影响,甚至很多人可能从来都没用到过,但我从不觉得探索和求知是无意义的,倒不如说这才是编程开发永远的主旋律,如果你看到这里觉得有所收获,那就再好不过了~

相关文章
|
4天前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
11 1
|
1天前
|
JavaScript 前端开发 iOS开发
优秀的JavaScript代码技巧大分享
优秀的JavaScript代码技巧大分享
12 3
|
1天前
|
JavaScript 前端开发 测试技术
编写高质量JavaScript代码怎么做
编写高质量JavaScript代码怎么做
11 2
|
16天前
|
存储 JavaScript 前端开发
小白实战!用JS实现一个3D翻书效果,附上代码
小白实战!用JS实现一个3D翻书效果,附上代码
|
16天前
|
JavaScript 前端开发 程序员
JS小白请看!一招让你的面试成功率大大提高——规范代码
JS小白请看!一招让你的面试成功率大大提高——规范代码
|
16天前
|
JavaScript 前端开发 测试技术
高质量的JavaScript代码该怎么写
高质量的JavaScript代码该怎么写
15 1
|
4天前
|
JavaScript
JS九行代码实现1~10猜数字游戏
JS九行代码实现1~10猜数字游戏
9 0
|
4天前
|
JavaScript 前端开发
JavaScript中的代码执行顺序
这篇文章通过示例代码解释了JavaScript中的代码执行顺序,特别是`load`事件的使用,它确保只有在整个页面加载完成后才会执行指定的JavaScript函数。
|
7天前
|
Web App开发 JavaScript 前端开发
IDEA——使用JavaScript Debugger调试代码
IDEA——使用JavaScript Debugger调试代码
13 0
|
16天前
|
JavaScript 前端开发 iOS开发
25个高质量的JavaScript代码技巧
25个高质量的JavaScript代码技巧
11 0