js 模拟 new 运算符实现的过程

今天来聊一聊 js 的 new 运算符,首先我们来看一段代码:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const car1 = new Car('Eagle', 'Talon TSi', 1993);
console.log(car1.make);

以上使用到了 new 关键字,那么 new 到底做了些什么操作?

  1. 首先,new 创建一个空的简单JavaScript对象(即{}
  2. 接着,链接该对象(即设置该对象的构造函数)到另一个对象
  3. 然后,将步骤1新创建的对象作为this的上下文
  4. 最后,如果该函数没有返回对象,则返回this

既然我们知道了new都做了些什么,下面我们自己来模拟下操作过程:

function jsNew(obj, ...args) {
    //1、创建空对象
    let o = {}

    //2、空对象原型指向构造函数obj的prototype
    o.__proto__ = obj.prototype
    // let o = Object.create(obj.prototype)

    //3、将obj的this指向空对象o
    let res = obj.apply(o, args)

    //4、该函数没有返回对象,则返回this
    return typeof res === 'object' ? res : o
}
const car2 = jsNew(Car,'Eagle', 'Talon TSi', 1993);
console.log(car2.make);

可以测试下,以上两个执行的结果都是:”Eagle”

小刘

爱生活,爱技术

你可能也会喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注