JavaScript中call()方法的用法与原理详解

call()方法概述与语法

根据Mozilla官方文档的定义，

call()方法允许在指定this值和若干指定参数的情况下调用某个函数或方法。

fun.call(thisArg[, arg1[, arg2[, ...]]])

Call()方法的参数说明

thisArg

thisArg表示在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值。如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象（浏览器中就是window对象）；同时，值为原始值（数字、字符串、布尔值）的this会指向该原始值的自动包装对象。

arg1, arg2, ...

表示指定的参数列表。

call()方法实例解析

JavaScript中的call()方法

暂时忽略上述复杂的理论解释，我们一步步通过实例来理解这个过程。

Call()方法的实例演示

首先编写一个简单的Hello,World示例：

function print(p1, p2) {
console.log( p1 + ' ' + p2);
}
print("Hello", "World");
print.call(undefined, "Hello", "World");

上述两种调用方式产生的输出结果相同，但相比之下，call方法额外传递了一个undefined作为this值。

接下来，我们再看另一个例子。

var obj=function(){};
function print(p1, p2) {
console.log( p1 + ' ' + p2);
}
print.call(obj, "Hello", "World");

在这个例子中，我们传入的仍然是一个空对象obj（原文表述为undefined，实指未赋予具体属性），这并未真正体现call的独特用法。让我们看一个更典型的例子。

function print(name) {
console.log( this.p1 + ' ' + this.p2);
}
var h={p1:"hello", p2:"world", print:print};
h.print("fd");
var h2={p1:"hello", p2:"world"};
print.call(h2, "nothing");

call的核心作用就是借用其他对象的方法来调用，就像调用自己的方法一样。在h.print中，当函数作为方法调用时，this指向相关的对象h。但在本例中，我们可能难以直观判断是h2调用了print，还是print调用了h2。因此，我们引用Mozilla提供的另一个经典例子来澄清这一点。

function Product(name, price) {
this.name = name;
this.price = price;
if (price < 0)
 throw RangeError('Cannot create product "' + name + '" with a negative price');
 return this;
}
function Food(name, price) {
 Product.call(this, name, price);
 this.category = 'food';
}
Food.prototype = new Product();
var cheese = new Food('feta', 5);
console.log(cheese);

通过这个例子，我们可以清晰地看到对象与方法之间的调用关系。示例中，使用Food构造函数创建的对象实例都会拥有在Product构造函数中添加的name属性和price属性，但category属性是在Food各自的构造函数中定义的。

function print(name) {
console.log( this.p1 + ' ' + this.p2);
}
var h2= function(no){
 this.p1 = "hello";
 this.p2 = "world";
 print.call(this, "nothing");
};
h2();

这里的h2作为接收者来调用函数print。正如在Food的例子中，在一个子构造函数中，你可以通过调用父构造函数的call方法来实现继承。

call方法的实际应用优势

关于Call方法的优点，在《Effective JavaScript》一书中有所介绍。

1. 使用call方法可以自定义接收者来调用函数。 2. 使用call方法可以调用在给定的对象中不存在的方法。 3. 使用call方法可以定义高阶函数，允许使用者给回调函数指定接收者。