【前端100问】Q14：如何实现一个 new

写在前面

此系列来源于开源项目：前端 100 问：能搞懂 80%的请把简历给我
为了备战 2021 春招
每天一题，督促自己
从多方面多角度总结答案，丰富知识
如何实现一个 new

正文回答

先理清楚 new 关键字调用函数都的具体过程，那么写出来就很清楚了

1. 首先创建一个空的对象，空对象的__proto__属性指向构造函数的原型对象
2. 把上面创建的空对象赋值构造函数内部的 this，用构造函数内部的方法修改空对象
3. 如果构造函数返回一个非基本类型的值，则返回这个值，否则上面创建的对象

function _new(fn, ...arg) {
  const obj = Object.create(fn.prototype);
  const ret = fn.apply(obj, arg);
  // 判断构造函数执行的返回类型
  return ret instanceof Object ? ret : obj;
}

function _new(fn, ...arg) {
  var obj = Object.create(fn.prototype);
  const result = fn.apply(obj, ...arg);
  return Object.prototype.toString.call(result) == "[object Object]"
    ? result
    : obj;
}

来自 MDN 的解释

MDN new 运算符

new 关键字会进行如下的操作：

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

（译注：关于对象的 constructor，参见 Object.prototype.constructor）

function Car() {}
car1 = new Car();
car2 = new Car();

console.log(car1.color); // undefined

Car.prototype.color = "original color";
console.log(car1.color); // original color

car1.color = "black";
console.log(car1.color); // black

console.log(car1.__proto__.color); //original color
console.log(car2.__proto__.color); //original color
console.log(car1.color); // black
console.log(car2.color); // original color