JS 手写new操作符 完整处理构造函数有返回值情况

调用new操作符发生的事情

1. 创建一个空对象；
2. 设置原型，将新对象的隐式原型对象__proto__设置为构造函数的显示原型prototype对象;
3. 让函数的this指向这个对象；
4. 执行构造函数里面的内容；
5. 判断函数的返回值类型，如果没有返回值或是一个基本数据类型，返回创建的对象；如果是引用类型，就返回这个引用类型的对象。

手写new操作符（myNew函数）

1. 构造函数

function ObjCreate(name) {
  this.name = name;
  this.color = ["pink"];
}

2. 构造函数原型上的方法

ObjCreate.prototype.sayName = function () {
  console.log(this.name);
};

3. myNew函数（new操作符）

function myNew() {
  //1.创建一个空对象
  const obj = Object.create({});
  //处理参数
  //取出第一个参数是构造函数
  const Func = Array.prototype.shift.call(arguments);
  //2.原型改变
  obj.__proto__ = Func.prototype;
  //3.this指向修改,并执行了构造函数内部内容
  //这里要记录一下构造函数有没有返回值
  let res = Func.apply(obj, arguments);
  //4.返回新对象，但当构造函数有返回值且是一个引用类型时，要返回指定的引用类型，
  //当不是引用类型时，才返回新对象obj
  //注意这个typeof判断，
  //在构造函数中如果return null,使用new时还是会返回新对象 ，res instanceof Object //false
  if (res instanceof Object) {
     return res;
  } else {
    return obj;
  }
}

使用自写myNew函数

let newobj = myNew(ObjCreate, "zs");
console.log(newobj);
newobj.sayName();
newobj.color.push("red");
console.log(newobj.color);

输出：

ObjCreate { name: 'zs', color: [ 'pink' ] }
zs
[ 'pink', 'red' ]

---

ps:第一次写博客，有问题欢迎指出~~