揭开 JavaScript 中 new、apply、call 和 bind 的底层秘密

引言： 函数调用与 this 的魅力

在 JavaScript 中，函数调用是程序执行的重要组成部分。除了传统的函数调用语法之外，JavaScript 还提供了 apply、call 和 bind 三个强大的函数调用方法，它们可以通过灵活地改变函数调用时的 this 指向和参数传递方式来实现更复杂的代码逻辑。

1. new：构造函数的秘密武器

new 运算符是一种特殊的函数调用方式，专门用于构造对象。它不仅会调用函数，还会创建并返回一个新对象，该对象将继承函数的原型链。

在 new 运算符的内部，发生了以下步骤：

• 创建一个新的空对象。
• 将此新对象设置为函数调用的 this 指向。
• 执行函数体。
• 返回新创建的对象。

示例：

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

const person = new Person('John', 30);
console.log(person); // { name: 'John', age: 30 }

2. apply：万能参数传递器

apply 方法允许我们以特定的 this 指向和参数数组来调用函数。它接收两个参数：thisArg 和 argsArr。

• thisArg： 指定函数调用的 this 指向。
• argsArr： 一个包含要传递给函数的参数的数组。

示例：

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

const obj = { name: 'Jane' };
greet.apply(obj); // 输出: Hello, Jane!

3. call：apply 的简洁版本

call 方法与 apply 类似，但它接受参数的语法更简洁。它将第一个参数指定为 thisArg，随后的参数作为函数的参数传递。

示例：

greet.call(obj, 'Jane'); // 输出: Hello, Jane!

4. bind：函数柯里化的利器

bind 方法用于创建一个新函数，该函数将原函数的 this 指向绑定到指定的 thisArg，并可以选择性地预先应用一些参数。它返回一个绑定后的函数，可以稍后被调用。

示例：

const boundGreet = greet.bind(obj);
boundGreet('Jane'); // 输出: Hello, Jane!

总结

new、apply、call 和 bind 方法是 JavaScript 中强大的工具，它们提供了对函数调用和 this 指向的灵活控制。理解它们的底层逻辑对于编写可维护和可扩展的代码至关重要。通过熟练运用这些方法，我们可以更轻松地实现代码重用、模块化和动态行为。