模拟实现js中的new操作符

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

这是MDN上对new操作符的定义，从这句话中可以看出new返回的其实就是一个实例，那么问题来了实例又是个啥东西？

先看个例子：

function Cat(name, gender) {
    this.name = name;
    this.gender = gender;
}

Cat.prototype.say = () => {
    console.log('miao, miao, miao');
}

const cat = new Cat('Tom', 'male');
console.log(cat.name); /* Tom */
console.log(cat.gender); /* male */
cat.say(); /* miao, miao, miao */
console.log(typeof cat); /* object */

从例子中可以看到，new操作符返回的其实是一个对象，这个对象可以访问到构造函数中属性和方法。那么就很明显了，在js中，所有对象都包含一个__proto__属性指向构造函数的原型，在对象上查找属性时会顺着__proto__一直向上查找。

相关：简单说说原型和原型链

那new的实现就简单了啊。

/* 因为new是关键词，所以用方法替代 */
function newObj() {
    const obj = {};
    const Constructor = Array.prototype.shift.call(arguments);
    obj.__proto__ = Constructor.prototype;
    Constructor.apply(obj, arguments);
    return obj;
}

对apply不熟悉的童鞋可能会对Constructor.apply(obj, arguments);这句代码有疑问。

function Cat(name, gender) {
    this.name = name;
    this.gender = gender;
}

const obj = {};
Cat.apply(obj, 'Tom', 'Mole'); // Constructor.apply(obj, arguments);
// 就相当于
obj.name = 'Tom';
obj.gender = 'Mole';

使用newObj来替换new会发现貌似没有问题，可以正常运行。可是当我们稍稍修改一下上述代码就会发现运行结果会不一样。

function Cat(name, gender) {
    this.name = name;
    this.gender = gender;
    return { name: 'Jerry', skin: 'block' };
}

Cat.prototype.say = () => {
    console.log('miao, miao, miao');
}

const cat = new Cat('Tom', 'male');
console.log(cat.name); /* Jerry */
console.log(cat.gender); /* undefined */
console.log(typeof cat); /* object */
cat.say(); /* TypeError: cat.say is not a function */

可以发现，当构造函数里面有返回值时，明显new操作符应该返回的对象是构造函数里面的返回值（仅当返回值是对象时有效）。
修改之前的代码。

function newObj() {
    const obj = {};
    const Constructor = Array.prototype.shift.call(arguments);
    obj.__proto__ = Constructor.prototype;
    const ret = Constructor.apply(obj, arguments);
    return typeof ret === 'object' ? ret : obj;
}

以上就是关于new的模拟实现。最后再贴上MDN上的描述：

1. 创建一个空的简单JavaScript对象（即{}）；
2. 链接该对象（即设置该对象的构造函数）到另一个对象 ；
3. 将步骤1新创建的对象作为this的上下文 ；
4. 如果该函数没有返回对象，则返回this。