前端三大核心函数 bind、call、apply详解

2024-02-15 21:04:24

函数绑定的艺术：使用 bind、call 和 apply 改变 JavaScript 中的 this 指向

在 JavaScript 的奇妙世界中，函数的 this 扮演着至关重要的角色，它指向调用函数的对象。然而，有时我们需要改变这个默认指向，以适应不同的场景。这就是 bind、call 和 apply 三个内置函数大显身手的时候了。

bind：创建新的函数，绑定 this

bind() 方法创建一个新的函数，它的 this 指向被永久绑定到指定的第一个参数。就像一位忠实的伙伴，无论这个新函数在哪里被调用，它都会将 this 指向指定的对象。

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

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

const person1 = new Person('John');
const person2 = new Person('Mary');

const greet1 = person1.greet.bind(person2);

greet1(); // 输出：Hello, my name is Mary.

在这个示例中，我们创建了 Person 构造函数，它代表不同的人。greet() 方法会打印出人的姓名。我们调用 bind() 方法将 greet() 方法绑定到 person2 对象上，创建了 greet1 函数。当我们调用 greet1() 时，它的 this 指向 person2，因此输出为 “Hello, my name is Mary.”。

call：直接调用，指定 this

call() 方法直接调用一个函数，并将指定的第一个参数作为 this 值传递给函数。它就像一个万能遥控器，允许你直接命令函数，并指定谁是它的主人。

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

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

const person1 = new Person('John');
const person2 = new Person('Mary');

person1.greet.call(person2); // 输出：Hello, my name is Mary.

在这个示例中，我们再次使用 Person 构造函数。这一次，我们使用 call() 方法直接调用 greet() 方法，并将 person2 对象作为 this 值传递给它。即使我们是从 person1 对象上调用的 greet() 方法，它仍然会以 person2 对象的身份执行，输出为 “Hello, my name is Mary.”。

apply：直接调用，指定 this 和参数列表

apply() 方法与 call() 方法类似，但它允许你将参数作为数组传递，而不是逐个传递。就像一个杂技演员，它可以将所有参数一次性抛给函数，让函数表演精彩的杂技。

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

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

const person1 = new Person('John');
const person2 = new Person('Mary');

person1.greet.apply(person2, ['Alice']); // 输出：Hello, my name is Alice.

在这个示例中，我们再次使用 Person 构造函数。我们使用 apply() 方法直接调用 greet() 方法，并将 person2 对象作为 this 值传递给它，并将 ['Alice'] 数组作为参数列表传递给它。这一次，输出将是 “Hello, my name is Alice.”，因为我们指定了 person2 作为 this，并传递了 “Alice” 作为参数。

总结：掌握函数绑定的力量

bind()、call() 和 apply() 就像函数绑定的超级英雄，它们让你可以自由自在地控制函数的 this 指向，从而实现更灵活的代码。