选项
有三种方法可以调用函数。
Direct: myFunction(Object arg1, Object arg2, ...);
Call: myFunciton.call(Object this, Object arg1, Object arg2, ...);
Apply: myFunction.apply(Object this, Array args);
每个都有自己的特点。
call()
和
apply()
唯一的缺点可能是它们的性能不佳。经过一些研究,发现它们比直接调用函数要慢一点。虽然如此之少,以至于根本不值得考虑。
该选择哪一个?
由于没有巨大的缺点,我们可以通过评估优点来选择一种方法。也就是说,比较功能并选择适合您情况的内容。
.call();
与直接调用函数不同,
.call()
允许您设置
this
关键字。除此之外,它几乎相同。那么为什么要设置
this
关键字呢?看下面的例子。
var element = document.getElementById('my-element');
doSomething(element, function(success) {
if(success) {
this.style.display = 'none';
}
});
function doSomething(element, callback) {
callback.call(element, success);
}
正如你所看到的,回调函数中的 this
指的是我们一直在操作的元素。这就是为什么我们喜欢使用 this
的原因,因为它很有意义!尤其是在使用对象时。
.apply();
正如 .call()
非常类似于直接调用函数一样,.apply()
具有另一个特性。它不允许程序员定义一组参数,而是可以使用数组来定义参数。这使您可以拥有动态数量的参数。
您可能熟悉 Math.max()
。此函数接受未定义数量的参数,并返回最高数字。
Math.max(1, 2, 3)
Math.max(1, 3, 2)
Math.max(1, 2, 3, 2, 3, 1, 2, 3)
如果我们有一个数字数组,可能来自于某种数据源,我们想要获取其中最大的数字。显然以下方法可以达到目的:
var numbers = [1, 6, 2, 8, 10, 6, 13, 5, 2, 8, 7, 75, 23, 7, 12, 75];
var max = -Infinity;
for(var i = 0; i < numbers.length; i++) {
max = Math.max(max, numbers[i]);
}
您正在浪费宝贵的时间循环遍历所有数字,而您可以让本地代码为您完成。这就是 .apply()
发挥作用的地方。虽然我们可以设置 this
,但 Math.max()
不使用 this
关键字,因此我们可以将其丢弃并使用 null
代替。不管数组中有多少个元素,这都无关紧要。
var numbers = [1, 6, 2, 8, 10, 6, 13, 5, 2, 8, 7, 75, 23, 7, 12, 75];
var max = Math.max.apply(null, numbers); // Apply all array elements as an own argument
结论
这些方法都没有明显的缺点。根据具体情况或个人喜好选择最合适的方法即可。
apply(...)
等问题! - Matías Fidemraizerthis
的值。除此之外,.apply()
允许您设置动态数量的参数。 - Tim S.