Web 开发指南：掌握 JavaScript 中的 call、apply 和 bind 函数区别

2024-01-24 04:32:20

JavaScript 中的 this 指向问题是初学者容易迷惑的地方之一。在函数内部，this 指向的是该函数所属的对象。然而，有时我们可能希望函数内部的 this 指向另一个对象。这时，就可以使用 call、apply 和 bind 函数来改变函数的 this 指向。

这三个函数的使用方法非常相似。它们都需要两个参数：第一个参数是函数所属的对象，第二个参数是函数的参数列表。

fun.call(obj, ...args)
fun.apply(obj, ...args)
fun.bind(obj, ...args)

其中，fun 是要调用的函数，obj 是函数所属的对象，args 是函数的参数列表。

call 函数直接执行函数，并把函数的 this 指向设置为 obj。

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

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

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

apply 函数与 call 函数类似，但它把函数的参数列表放在一个数组中。

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

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

const greetings = ['Hello', 'Bonjour', 'Hola'];

greet.apply(person, greetings); // 输出：Hello, John Doe!, Bonjour, John Doe!, Hola, John Doe!

bind 函数与 call 和 apply 函数不同，它不立即执行函数，而是返回一个新的函数，该函数的 this 指向已经绑定到 obj。

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

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

const boundGreet = greet.bind(person);

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