JavaScript中的call()方法|极客笔记

JavaScript中的call()方法

引言

在JavaScript中，我们经常需要在一个对象上调用一个函数，这时就可以使用call()方法。call()方法是JavaScript内置的函数方法之一，它允许我们在一个对象上调用一个方法，并且可以设置方法内部的this指向。

本文将详细讲解JavaScript中的call()方法的使用方法、语法以及示例代码。同时，还会介绍一些call()方法在实际开发中常见的应用场景。

语法

call()方法的语法如下所示：

function.call(thisArg, arg1, arg2, ...)

function：要调用的函数。
thisArg：在函数中使用的this值。
arg1, arg2, ...：可选参数，传递给函数的参数。

理解`call()`方法

在JavaScript中，每个函数都是一个对象。当一个函数被调用时，JavaScript会创建一个活动记录（activation record）来保存函数的相关信息，包括参数、变量和函数的返回地址。在函数内部，我们可以使用this关键字来引用函数被调用的对象。

在某些情况下，我们可能需要显式地指定函数内部this的值，这时就可以使用call()方法。call()方法允许我们在一个指定的对象上调用函数，并且可以设置函数内部的this指向该对象。

示例代码

下面我们来看一个使用call()方法的简单示例。

// 定义一个对象
const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// 定义另一个对象
const person2 = {
  firstName: "Jane",
  lastName: "Smith"
};

// 使用call方法调用person对象的fullName方法，并将this指向person2对象
const fullName = person.fullName.call(person2);

console.log(fullName); // 输出：Jane Smith

在上面的示例中，我们定义了一个名为person的对象，它有一个fullName()方法。我们还定义了另一个名为person2的对象。

通过使用call()方法，我们将person2对象作为参数传递给fullName()方法，这样在fullName()方法内部的this指向了person2对象。这样，我们就可以在person2对象上调用fullName()方法并获取正确的结果。

`call()`方法的实际应用场景

call()方法在实际开发中有很多应用场景，下面我们将介绍一些常见的应用示例。

1. 借用构造函数

在JavaScript中，我们可以使用构造函数来创建对象。有时，我们可能希望在一个构造函数中重用另一个构造函数的代码，这时可以使用call()方法来实现。

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

function Employee(firstName, lastName, position) {
  Person.call(this, firstName, lastName);
  this.position = position;
}

const employee = new Employee("John", "Doe", "Developer");

console.log(employee.firstName); // 输出：John
console.log(employee.lastName); // 输出：Doe
console.log(employee.position); // 输出：Developer

在上面的示例中，我们定义了一个Person构造函数用于创建Person对象，它有两个参数：firstName和lastName。

我们还定义了一个Employee构造函数用于创建Employee对象，它继承了Person构造函数，并添加了一个额外的参数position。

在Employee构造函数中，我们使用call()方法将当前对象（this）传递给Person构造函数，这样Person构造函数内部的this指向了Employee对象，并在Employee对象上设置了firstName和lastName属性。

2. 函数继承

除了借用构造函数，call()方法还可以用于实现函数继承。通过在子类中调用父类的构造函数，子类可以继承父类的方法和属性。

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log(`My name is ${this.name}.`);
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const dog = new Dog("Bobby", "Golden Retriever");

console.log(dog.name); // 输出：Bobby
console.log(dog.breed); // 输出：Golden Retriever
dog.sayName(); // 输出：My name is Bobby.

在上面的示例中，我们定义了一个Animal构造函数用于创建Animal对象，它有一个参数：name。

我们还定义了一个Dog构造函数用于创建Dog对象，它继承了Animal构造函数，并添加了一个额外的参数breed。

在Dog构造函数中，我们使用call()方法将当前对象（this）传递给Animal构造函数，这样Animal构造函数内部的this指向了Dog对象，并在Dog对象上设置了name属性。

最后，我们使用Object.create()方法和call()方法来将Dog的原型设置为Animal的原型，从而实现函数继承。