当前位置:首页 > JavaScript

js new 实现

2026-03-15 06:20:08JavaScript

new 的实现原理

在 JavaScript 中,new 运算符用于创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。其核心原理可以分解为几个关键步骤:

创建一个空的简单 JavaScript 对象(即 {}) 将新对象的 __proto__ 属性指向构造函数的 prototype 对象 将构造函数内部的 this 绑定到新创建的对象 执行构造函数内部的代码(通常包含属性赋值等操作) 如果构造函数没有显式返回对象,则默认返回新创建的对象

手动实现 new

可以通过以下代码模拟 new 操作符的功能:

function myNew(constructor, ...args) {
  // 创建一个新对象,继承构造函数的 prototype 属性
  const obj = Object.create(constructor.prototype)

  // 调用构造函数,绑定 this 到新对象
  const result = constructor.apply(obj, args)

  // 如果构造函数返回了对象,则使用该对象,否则返回新对象
  return result instanceof Object ? result : obj
}

使用示例

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

Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`)
}

// 使用原生 new
const p1 = new Person('Alice', 25)
p1.sayHello() // 输出: Hello, I'm Alice

// 使用自定义实现的 myNew
const p2 = myNew(Person, 'Bob', 30)
p2.sayHello() // 输出: Hello, I'm Bob

特殊情况处理

当构造函数有返回值时,new 的行为会有特殊处理: 如果返回值是对象类型,则返回该对象 如果返回值是原始类型,则忽略返回值,仍然返回新创建的对象

function Car(model) {
  this.model = model
  return { custom: 'object' } // 返回对象
}

const c = new Car('Tesla')
console.log(c) // 输出: { custom: 'object' } 而不是 Car 实例

原型链关系

通过 new 创建的对象会保持正确的原型链关系:

js new 实现

console.log(p1 instanceof Person) // true
console.log(p2 instanceof Person) // true
console.log(Object.getPrototypeOf(p1) === Person.prototype) // true

标签: jsnew
分享给朋友:

相关文章

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js实现继承

js实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现打印

js实现打印

使用window.print()方法实现打印 在JavaScript中,可以通过调用window.print()方法直接触发浏览器的打印功能。这会打开系统的打印对话框,用户可以选择打印机和设置打印选项…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…

js画图实现

js画图实现

使用Canvas API绘制图形 Canvas是HTML5提供的绘图API,通过JavaScript操作Canvas元素可以绘制各种图形。以下是一个简单的示例: <canvas id="myC…