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

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

相关推荐
Slice_cy8 分钟前
深入剖析Vue框架:实现精简的computed
前端
局i9 分钟前
ES6 类与继承:现代 JavaScript 面向对象编程
前端·javascript·es6
白菜上路10 分钟前
C# Web API Mapster基本使用
前端·c#
沐怡旸12 分钟前
【算法--链表】146.LRU缓存--通俗讲解
算法·面试
叫我詹躲躲13 分钟前
偷偷收藏!前端老鸟绝不外传的150个JS插件,让你效率翻3倍…
前端·vue.js
沐怡旸13 分钟前
【基础知识】仿函数与匿名函数对比
c++·面试
会豪14 分钟前
如何让自己的前端项目更优雅
前端
uhakadotcom27 分钟前
致新人:如何编写自己的第一个VSCode插件,以使用@vscode/vsce来做打包工具为例
前端·面试·github
流***陌33 分钟前
用工招聘小程序:功能版块与前端设计解析
前端·小程序
之恒君35 分钟前
typescript(tsconfig.json - esModuleInterop)
前端·typescript