手动实现 new 操作符(不兼容IE版)

手动实现 JavaScript 中的 new 操作符

最新推荐文章于 2025-10-05 05:30:00 发布

原创最新推荐文章于 2025-10-05 05:30:00 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文探讨了如何手动实现 JavaScript 中的 `new` 操作符，详细解释了 `new` 的四个核心步骤：创建空对象，链接原型，设置 `this` 上下文，以及函数没有返回对象时返回 `this`。通过代码示例展示了手动实现的过程，并验证了其实现效果。

前言

想要手动实现 new 操作符，就必须要知道 new 操作符的作用是什么。

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

当你调用 new 操作符之后，会进行如下操作：

创建一个空对象。
将新创建的对象的原型链接到需要实例化的对象原型上（即修改新对象的原型）。
设置 this 上下文对象为新创建的对象，执行构造函数中的代码。
如果该函数没有返回对象(非 Object 类型)，则返回 this (即新建对象)。

代码实现

function myNew(constructor, ...args) {

  if (typeof constructor !== 'function') throw TypeError('Parament \'constructor\' is not a function.')

  // Object.create() 方法创建一个新对象，使用现有的对象来提供新创建的对象的 __proto__ 。
  // 步骤 1 2
  const obj = Object.create(constructor.prototype)

  // 执行构造函数的代码，并且执行之前将构造函数的作用域赋值给新对象
  // 步骤 3
  const result = constructor.apply(obj, args)

  // 如果构造函数的返回值是 6 种基本数据类型之一(Null, Undefined, Number, Boolean, Symbol, String), 不会返回这些值，而是返回一个对象。如果是 Object 类型（Functoin, Array, Date, RegExg, Error），则直接返回这个对象。
  // typeof null 会等于 ‘object’，所以要手动排除 null
  // 步骤 4
  if ( (typeof result === 'object' || typeof result === 'function') && result !== null ) return result
  return obj
}

使用

function Person(name, gender) {
  this.name = name
  this.gender = gender
}

Person.prototype.sayHello = function () {
  console.log('Hello, my name is a ' + this.name + '.')
}

const maxin = myNew(Person, 'maxin', 'male')
console.log(maxin)
maxin.sayHello() // Hello, my name is a maxin.

控制台打印结果:

可以看出，我们已经实现了 new 操作符。

原文链接：https://juejin.im/post/6859988552651014157