Function.prototype.call() / apply() 方法详解

2023-12-07 02:37:30

Function.prototype.call() 方法

call() 方法的语法如下：

Function.prototype.call(thisArg, arg1, arg2, ...)

thisArg ：指定函数执行时 this 指向的对象。
arg1, arg2, ... ：要传递给函数的参数。

call() 方法的用法非常简单，只需要将要调用的函数作为第一个参数，然后将要传递给函数的参数作为后续参数即可。例如，以下代码将使用 call() 方法调用一个名为 greet() 的函数，并将 this 指向设置为对象 person：

const person = {
  name: 'John Doe'
};

function greet(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}

greet.call(person, 'Hello'); // 输出: "Hello, John Doe!"

Function.prototype.apply() 方法

apply() 方法的语法如下：

Function.prototype.apply(thisArg, [args])

thisArg ：指定函数执行时 this 指向的对象。
args ：一个包含要传递给函数的参数的数组。

apply() 方法的用法与 call() 方法非常相似，唯一区别在于 apply() 方法接收一个数组作为参数，而 call() 方法接收单个参数。例如，以下代码将使用 apply() 方法调用一个名为 greet() 的函数，并将 this 指向设置为对象 person：

const person = {
  name: 'John Doe'
};

function greet(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}

greet.apply(person, ['Hello']); // 输出: "Hello, John Doe!"

call() 方法和 apply() 方法的比较

call() 方法和 apply() 方法都是用来改变函数执行时上下文（即 this 指向）的方法，但它们之间还是有一些区别的：

参数传递方式 ：call() 方法将参数逐个传递给函数，而 apply() 方法将参数作为一个数组传递给函数。
使用场景 ：call() 方法通常用于将函数绑定到特定的对象，而 apply() 方法通常用于将函数应用于一个数组。

注意事项

call() 方法和 apply() 方法都可以用来改变函数执行时上下文（即 this 指向），但它们并不是万能的。例如，以下代码将尝试使用 call() 方法将函数 greet() 绑定到对象 person，但由于 greet() 函数是一个箭头函数，所以 this 指向无法被改变：

const person = {
  name: 'John Doe'
};

const greet = () => {
  console.log(`Hello, ${this.name}!`);
};

greet.call(person); // 输出: "Hello, undefined!"