跳到主要内容

JavaScript 函数的 call() 方法详解

call()方法通过传递this和指定值作为参数来调用函数。

示例​

// 一个添加两个数字的函数
function sum(a, b) {
  return a + b;
}

// 调用 sum() 函数
var result = sum.call(this, 5, 10);

console.log(result);

// 输出：
// 15

call() 语法​

call()方法的语法是：

func.call(thisArg, arg1, ...argN);

这里的func是一个函数。

call() 参数​

call()方法可以接受两个参数：

  • thisArg - thisArg是在函数func内部this对象引用的对象。
  • arg1, ... argN（可选）- 函数func的参数。

注意： 默认情况下，在函数中this指向全局对象，即在网页浏览器中是window，在node.js中是global。

call() 返回值​

  • 返回用指定的this值和参数调用函数后获得的结果。

注意： 通过使用call()，我们可以使用属于一个对象的函数被分配并调用给另一个对象。

示例 1：使用 call() 方法​

function sum(a, b) {
  return a + b;
}

// 通过传递 this 和 'a', 'b' 参数调用 sum()
let result = sum.call(this, 5, 3);

console.log(result);

输出：

8;

在上面的示例中，我们定义了一个函数sum()，它返回两个数字的和。

然后我们使用call()方法以sum.call(this, 5, 3)的形式调用了sum()。

这里，默认情况下函数内的this被设置为全局对象。

示例 2：使用和不使用 call() 方法​

// 一个计算两个数字乘积的函数
function product(a, b) {
  return a * b;
}

// 不使用 call() 方法直接调用 product()
let result1 = product(5, 2);

console.log("不使用 call() 方法的返回值: " + result1);

// 使用 call() 方法调用 product()
let result2 = product.call(this, 5, 2);

console.log("使用 call() 方法的返回值: " + result2);

输出：

不使用 call() 方法的返回值: 10
使用 call() 方法的返回值: 10

在上面的示例中，我们调用了product()函数：不使用call()和使用call()。

  • 不使用call()- 我们可以直接调用product()，如product(5, 2)。
  • 使用call()- 我们需要传递this参数，如product.call(this, 5, 2)。

示例 3：在 call() 中传递对象作为 this 值​

// 对象定义
const human = {
  firstName: "Judah",
  lastName: "Parker",
  age: 26,
};

// 函数定义
function greet() {
  const string = `My name is ${this.firstName} ${this.lastName}. I am ${this.age} years old.`;
  console.log(string);
}

// 在 call() 方法中传递对象作为 this 值
greet.call(human);

输出

My name is Judah Parker. I am 26 years old.

在上面的示例中，我们定义了greet()函数，在其中我们定义了一个变量string，可以访问human的值。

然后我们将human对象作为this值传递给了call()方法，即greet.call(human)，这调用了greet()。

示例 4：使用 call() 链接构造函数​

// 函数定义
function Animal(name, age) {
  this.name = name;
  this.age = age;
}

// 函数定义
function Horse(name, age) {
  Animal.call(this, name, age);
  this.sound = "Neigh";
}

// 函数定义
function Snake(name, age) {
  Animal.call(this, name, age);
  this.sound = "Hiss";
}

const snake1 = new Snake("Harry", 5);
console.log(snake1.name, snake1.age, snake1.sound);

const horse1 = new Horse("Arnold", 8);
console.log(horse1.name, horse1.age, horse1.sound);

输出

Harry 5 Hiss
Arnold 8 Neigh

注意： call()和apply()的区别在于，call()接受一个参数列表，而apply()接受一个参数数组。

推荐阅读： JavaScript 函数 apply()

最后于 更新