"你真正理解`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
    }

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

相关推荐
开源之眼2 分钟前
React中,useState和useReducer有什么区别
前端
普郎特12 分钟前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
绝无仅有19 分钟前
mysql性能优化实战与总结
后端·面试·github
可观测性用观测云21 分钟前
前端错误可观测最佳实践
前端
恋猫de小郭22 分钟前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
一枚前端小能手43 分钟前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码43 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
ByteBlossom43 分钟前
MySQL 面试场景题之如何处理 BLOB 和CLOB 数据类型?
数据库·mysql·面试
Cyan_RA91 小时前
计算机网络面试题 — TCP连接如何确保可靠性?
前端·后端·面试
谢尔登1 小时前
【CSS】层叠上下文和z-index
前端·css