用三行代码来实现new---简单版本

414 阅读2分钟

实现一个new的简单版本,其实就只有三步。话不多说,直接来。

首先我们需要一个构造函数,根据这个构造函数new 一个对象并打印在控制台中来做参考。

function F(){
    this.name = '我是一个构造函数';
};
console.log(new F());

在控制台执行代码会输出一个对象

接下来我们用三步实现一个一模一样的对象,每一步我们都打印一下,对比new生成的对象。

第一步:创建一个空对象

const obj = {};
console.log(obj);

第一步执行后我们有了一个{}(对象)还有一个__proto__ (原型),只不过我们的__proto__和new的__proto__明显是不一样的,所以接下来要让它们变成一样的!

第二步:改变空对象的原型链

obj.__proto__ = F.prototype;
console.log(obj);

与new的对比

这一步执行后基本就与new的对象有了同一个外壳了,最后只要把构造函数里面的代码整到obj中,就大功告成了。

obj.proto = F.prototype

对这一句有疑问的话,可以认真再理解一下原型链

熟悉原型链看这里

第三步:继承构造函数的属性与方法

F.call(obj);
console.log(obj);

与new的对比

到这里我们就完整创造出一个一模一样的对象了。

这里需要知道call都做了啥?

熟悉call看这里

总结一下

function F(){
    this.name = '我是一个构造函数';
};
// 实现new的三行代码
const obj = {};
obj.__proto__ = F.prototype;
F.call(obj);

new其实也是类似封装的作用,可以让我们快速的生成一个在原型链生态中的对象,没有它js也可以继续存在,我们可以通过自己的封装。

对比java,没有了new 它还能存在吗?所以js只是有面向对象的编程实现,但是它本身并不是一门面向对象的语言。

文中如有纰漏,请在评论中指出。