返回

深入浅出：掌握手写JavaScript new 操作符，解锁高级开发

前端

前言

JavaScript 中的 new 操作符是创建一个新对象的强大工具，它不仅用于实例化类，还隐藏着对象创建和函数调用的诸多奥秘。通过手写 new 操作符，我们可以深入理解其底层工作原理，增强对 JavaScript 中对象模型的掌控力。

手写 new 操作符的原理

new 操作符执行以下步骤来创建一个新对象：

  1. 创建一个空对象 obj。
  2. 将 obj 的 __proto__ 指向构造函数的 prototype 属性。
  3. 将 this 指向新创建的对象 obj。
  4. 执行构造函数，并使用 obj 作为 this 指向。
  5. 如果构造函数返回一个非原始值（对象或数组），则将该值返回为 new 操作符的结果；否则，返回新创建的对象。

实现手写 new 操作符

以下是手写 new 操作符的一种实现方式：

function myNew(fn, ...args) {
  // 创建一个新对象
  const obj = {};
  // 设置对象的原型
  obj.__proto__ = fn.prototype;
  // 将 this 指向新对象
  const result = fn.apply(obj, args);
  // 返回构造函数返回值或新对象
  return result instanceof Object ? result : obj;
}

使用手写 new 操作符

我们可以使用手写 new 操作符来创建对象，例如：

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

const person = myNew(Person, 'John');
console.log(person.name); // 输出：John

高级应用场景

手写 new 操作符在以下高级应用场景中很有用：

  • 函数柯里化： 创建部分应用函数，延迟参数绑定。
  • 单例模式： 确保一个类只有一个实例。
  • 继承重写： 修改或扩展现有类的行为。
  • 创建 Proxy 对象： 拦截对象的属性访问和赋值操作。

与 ES6 类的比较

ES6 中引入了 class ，它提供了创建对象的一种语法糖方式。与手写 new 操作符相比，class 语法更简洁，但本质上仍然依赖于 new 操作符。

总结

通过手写 JavaScript new 操作符，我们可以深入理解对象创建的底层机制，增强对 JavaScript 中对象模型的掌控力。它在高级开发场景中具有广泛的应用，为构建灵活可控的代码提供了强大的工具。