选项
函数的调用方式有3种。
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) {
// something succeeded!
// because I passed "element" as "this",
// I can use "this" to do more stuff with "element"
this.style.display = 'none';
}
});
function doSomething(element, callback) {
// do something with element
// I'm done, let's call the callback
callback.call(element, success);
}
如您所见,回调参数中的this 指的是我们一直在使用的元素。这就是我们喜欢使用this 的原因,因为……这很有意义!尤其是当你使用对象时。
.apply();
正如.call() 与直接调用函数非常相似,.apply() 带有另一个特性。可以使用数组来定义参数,而不是允许程序员定义一组参数。这允许您拥有动态数量的参数。
您可能熟悉Math.max()。此函数接受未定义数量的参数,并返回最大的数字。
Math.max(1, 2, 3); // 3
Math.max(1, 3, 2); // 3
Math.max(1, 2, 3, 2, 3, 1, 2, 3); // 3
如果我们有一个数字数组,可能来自一个提要,并且我们想获得最大的数字怎么办?这显然可行:
var numbers = [1, 6, 2, 8, 10, 6, 13, 5, 2, 8, 7, 75, 23, 7, 12, 75];
// Prepare "max"
// Anything is greater than -Infinity
var max = -Infinity;
// Loop through all numbers
for(var i = 0; i < numbers.length; i++) {
// Compare current number with existing max
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
结论
这些方法都没有(明显的)缺点。做任何看起来最适合这种情况或你最喜欢的事情。