js之new的实现原理

执行流程

调用 new构造函数的过程发生四件事：

1. 创建空对象：new关键字会首先创建一个空对象

2. 链接到原型：将这个空对象的原型对象指向构造函数的原型属性，从而继承原型上的方法

3. 绑定this： 将this指向这个空对象，执行构造函数中的代码，以获取私有属性

4. 返回新对象：如果构造函数返回了一个对象res，就将该返回值res返回，如果返回值不是对象，就将创建的对象返回

代码实现

function $new (){
    //1. 创建一个空对象
    let obj = {};
    let [constructor,...args] = [...arguments]
    //2. 链接到原型：将这个空对象的原型对象指向构造函数的原型属性，从而继承原型上的方法
    obj.__proto__ = constructor.prototype;
    //3.绑定this：将this指向这个空对象，执行构造函数中的代码，以获取私有属性
    let res = constructor.apply(obj, args);
    //4.返回新对象：如果构造函数返回了一个对象res，就将该返回值res返回，如果返回值不是对象，就将创建的对象返回
    if(res && (typeof (res) == 'object' || typeof (res) == 'function')){
        return res;
    }
    return obj;
}
 

function Person(){
    this.name = 'tony'
}

$new(Person).name // tony

总结

new 操作符，可以创建一个原型对象的实例对象，并且继承了原型对象的属性、方法，故new不仅仅是实例化一个对象，同时也实现了 js 的继承。