当前位置:首页 > 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实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https://…

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…

js实现定位

js实现定位

使用Geolocation API获取当前位置 在JavaScript中,可以通过浏览器内置的Geolocation API获取用户的地理位置信息。该API需要用户授权才能访问位置数据。 if (n…

js实现的游戏

js实现的游戏

JavaScript 游戏开发基础 JavaScript 是开发网页游戏的流行选择,因其无需插件即可在浏览器中运行。以下是一些关键技术和资源: HTML5 Canvas Canvas 提供了绘制图形…

js 实现递归

js 实现递归

递归的基本概念 递归是指函数直接或间接调用自身的过程。在JavaScript中,递归通常用于解决可以分解为相似子问题的问题,如阶乘、斐波那契数列、树形结构遍历等。 递归的实现要点 基线条件(Base…

js实现音乐播放

js实现音乐播放

使用HTML5 Audio API实现音乐播放 在JavaScript中,可以通过HTML5的Audio API轻松实现音乐播放功能。以下是基本实现方法: // 创建Audio对象 const au…