"你真正理解`new`操作符了吗?这篇文章告诉你它的秘密!"

今天我们来聊一聊JavaScript中的new操作符,它用于创建一个给定构造函数的实例对象。话不多说,我们来看下面的这一段代码:

js 复制代码
function Person() {
    this.name = 'John';
    this.age = 18;
}

const p = new Person();
console.log(p,p.constructor); // Person { name: 'John', age: 18 } [Function: Person]

我们发现,构造函数Person上面的属性,实例对象p也能够访问,并且,构造函数原型对象(prototype)上的 constructor属性,它也能够访问。

这能够说明什么呢?

  • 构造函数的this指向了实例对象
  • 实例对象的__proto__指向了构造函数的prototype

再来看这一段代码:

js 复制代码
function Person() {
    this.name = 'John';
    this.age = 25;
    return {
        hobby: 'coding'
    }
}

const p = new Person();
console.log(p,p.constructor); // { hobby: 'coding' } [Function: Object]

我们会发现,这里的实例对象p好像又不能访问构造函数Person上面的属性了,而只能访问构造函数返回的那个对象。那么如果返回值不是对象,又会出现什么结果呢?

js 复制代码
function Person() {
    this.name = 'John';
    this.age = 25;
    return 123
}

const p = new Person();
console.log(p,p.constructor); // Person { name: 'John', age: 25 } [Function: Person]

我们会发现,如果不是返回一个对象的话,那和没有返回值是一样的。其实是这样的,new操作符在创建实例对象的时候干了这么一件事。

  • 创建一个空对象
  • 将该对象的__proto__指向构造函数的prototype
  • 执行构造函数,并将构造函数的this指向该空对象
  • 如果构造函数具有返回值,并且返回值是一个对象,那么返回该对象,否则返回我们刚开始创建的空对象。

如下便是一个简单的new的实现

js 复制代码
function myNew(fn, ...args) {
        // 创建一个新对象
        const obj = {}
        // 构造函数的prototype 指向 实例对象的__proto__
        obj.__proto__ = fn.prototype
        // 将构造函数的this指向obj,并执行构造函数
        const result = fn.call(obj, ...args)
        // 如果返回值是对象,返回对象,否则返回新对象
        return typeof result === 'object' && typeof result !== null ? result : obj
    }

今天的分享就到这,如有不对的地方,欢迎大家指正。

相关推荐
玲小珑14 分钟前
Next.js 教程系列(十六)Next.js 中的状态管理方案
前端·next.js
前端小巷子16 分钟前
web实现文件的断点续传
前端·javascript·面试
小磊哥er17 分钟前
【前端工程化】前端项目怎么做代码管理才好?
前端
jojo是只猫1 小时前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机5 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程9 小时前
2025前端面试题
前端·面试
前端小趴菜0510 小时前
React - createPortal
前端·vue.js·react.js
晓131311 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
倔强青铜三11 小时前
苦练Python第18天:Python异常处理锦囊
人工智能·python·面试
菜包eo11 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频