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

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

相关推荐
没有bug.的程序员17 分钟前
JAVA面试宝典 -《安全攻防:从 SQL 注入到 JWT 鉴权》
java·安全·面试
彤银浦22 分钟前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆27 分钟前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆35 分钟前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆41 分钟前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding1 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆1 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
angen20181 小时前
Ruby如何采集直播数据源地址
前端·chrome
goldenocean1 小时前
React之旅-05 List Key
前端·javascript·react.js
亮学长1 小时前
lodash不支持 Tree Shaking 而 lodash-es可以
大数据·前端·elasticsearch