函数的 this 绑定：call、apply、bind 逐一击破

函数的 this 绑定

在 JavaScript 中，this 是一个指向当前执行上下文的引用。当我们调用一个函数时，this 将自动指向该函数的调用者。然而，有时我们需要手动绑定 this，以便在特定上下文中执行函数。实现 this 绑定的三种最常用方法是 call()、apply() 和 bind()。

call() 方法

call() 方法用于在指定的对象上下文中调用函数。语法如下：

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

其中，function 是要调用的函数，object 是要作为 this 上下文的对象，arg1、arg2 等是传递给函数的参数。

例如，以下代码将使用 call() 方法将函数 greet() 绑定到对象 person，然后使用 person 对象调用 greet() 函数：

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

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

greet.call(person); // 输出：Hello, John Doe!

apply() 方法

apply() 方法与 call() 方法类似，用于在指定的对象上下文中调用函数。语法如下：

function.apply(object, [args])

其中，function 是要调用的函数，object 是要作为 this 上下文的对象，args 是一个包含函数参数的数组。

例如，以下代码将使用 apply() 方法将函数 greet() 绑定到对象 person，然后使用 person 对象调用 greet() 函数：

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

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

greet.apply(person, ['Jane Doe']); // 输出：Hello, Jane Doe!

bind() 方法

bind() 方法用于创建一个新的函数，该函数在指定的对象上下文中绑定了 this。语法如下：

function.bind(object)

其中，function 是要调用的函数，object 是要作为 this 上下文的的对象。

例如，以下代码将使用 bind() 方法将函数 greet() 绑定到对象 person，然后使用 person 对象调用 greet() 函数：

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

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

const greetJohn = greet.bind(person);

greetJohn(); // 输出：Hello, John Doe!

总结

call()、apply() 和 bind() 是 JavaScript 中用于绑定函数的 this 上下文的三种常用方法。这三种方法的语法和用法略有不同，但它们都实现了相同的功能。

方法	语法	参数	返回值
call()	function.call(object, arg1, arg2, ...)	object - 要作为 this 上下文的对象，arg1、arg2 等 - 要传递给函数的参数	无
apply()	function.apply(object, [args])	object - 要作为 this 上下文的对象，args - 一个包含函数参数的数组	无
bind()	function.bind(object)	object - 要作为 this 上下文的对象	一个新的函数，该函数在指定的对象上下文中绑定了 this