手把手带你入门：call、apply、bind 函数的神奇用法

2023-11-14 22:22:15

1. call 函数：操控 this 指向，传递参数

在 JavaScript 中，call 函数是一个强大的工具，它允许我们改变函数的 this 指向，同时还能传递参数。

改变 this 指向

例如，我们有一个函数，这个函数内部使用了 this ，但是我们想改变这个函数的 this 指向，让它指向另一个对象。此时，我们可以使用 call 函数。

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

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

// 调用 greet 函数，并将 this 指向 person 对象
greet.call(person); // 输出：Hello, my name is John Doe

在上面的示例中，我们使用 call 函数改变了 greet 函数的 this 指向，让它指向 person 对象。因此，当我们调用 greet 函数时，它将输出 "Hello, my name is John Doe"。

传递参数

除了改变 this 指向，call 函数还可以让我们传递参数给函数。

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

// 调用 sum 函数，并传递参数 1 和 2
const result = sum.call(null, 1, 2); // 结果：3

在上面的示例中，我们使用 call 函数传递参数 1 和 2 给 sum 函数。因此，当我们调用 sum 函数时，它将返回 3。

2. apply 函数：巧妙传递参数

apply 函数与 call 函数非常相似，但它有一个区别：apply 函数接受一个数组作为参数，而 call 函数接受单个参数列表。

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

// 调用 sum 函数，并传递参数数组 [1, 2]
const result = sum.apply(null, [1, 2]); // 结果：3

在上面的示例中，我们使用 apply 函数传递参数数组 [1, 2] 给 sum 函数。因此，当我们调用 sum 函数时，它将返回 3。

3. bind 函数：创建新函数，锁定 this 指向

bind 函数与 call 和 apply 函数不同，它并不立即调用函数，而是创建一个新的函数，这个新函数的 this 指向被锁定为指定的 this 值。

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

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

// 使用 bind 函数创建一个新的函数，并锁定 this 指向 person 对象
const greetJohn = greet.bind(person);

// 调用 greetJohn 函数
greetJohn(); // 输出：Hello, my name is John Doe