JavaScript模拟实现new操作符

首先 先看看new操作符的作用

1、新建一个空对象

2、空对象的__proto__属性要指向构造函数的prototype（这是为了实例能获得构造函数原型上的属性和方法）

3、将构造函数的this指向这个空对象、执行构造函数

4、返回这个对象

function Animal(name) {
        this.name= name
    }
    Animal.prototype.age=14
    let cat = new Animal('猫')
    console.log(cat.name,cat.age)

控制台输出如下

接下来我们模拟实现new操作符

    function Animal(name) {
        this.name= name
    }
    Animal.prototype.age=14
    function modnew(){
        let obj = {}
        let Fn = [].shift.call(arguments)
        obj.__proto__= Fn.prototype
        Fn.apply(obj,arguments)
        return obj
    }
    let cat = new modnew(Animal,'猫')
    console.log(cat.name,cat.age)

modnew函数，首先let obj = {}，是执行的new操作符的第一步，新建一个空对象，然后let Fn = [].shift.call(argument)，这一步是为了获取输入参数的第一个参数，也就是构造函数，接着obj.__ptoto__=Fn.prototype，这一步是为了执行new方法的第三步，将构造函数的this指向实例。最后一步，return obj，执行构造函数，返回。

控制台输出如下。

执行到这一步实际只完成了一半，我们来看看new操作符如果有返回值会发生什么

    function Animal(name) {
        this.name= name
        return 1
    }
    Animal.prototype.age=14
    
    let cat = new modnew(Animal,'猫')
    console.log(cat.name,cat.age)

控制台输入如下

我也试过其它的基本类型的返回值，事实证明，返回一个基本数据类型对象对new出来的实例并无影响。

但是如果返回值是一个引用数据类型（数组或对象）。

    function Animal(name) {
        this.name= name
        return [1,2]
    }
    Animal.prototype.age=14

    let cat = new Animal('猫')
    console.log(cat)

返回值如下

所以说，如果new操作符的构造函数返回的是一个引用数据类型。那么实例就应该是这个返回的引用数据类型。

修改模拟new函数也很简单。

function modnew(){
        let obj = {}
        let Fn = [].shift.call(arguments)
        obj.__proto__= Fn.prototype
        return typeof (Fn.apply(obj,arguments))=="object"?Fn.apply(obj,arguments):obj
    }

很简单，我们判断一下Fn.apply（obj.arguments）的返回值，如果是对象，就返回这个对象，如果不是，就返回obj。

完美