手写 New

1、手写New

• new 到底做了什么
• 手写一个new

new到底做了什么

function Person(firtName, lastName) {
  this.firtName = firtName;
  this.lastName = lastName;
}

Person.prototype.getFullName = function () {
  return `${this.firtName} ${this.lastName}`;
};

const tb = new Person('xing', 'mingzi');
console.log(tb);

在控制台中可以看到：

从图中我们可以看到.实例里面有以下东西:

• 两个属性, firtName和lastName, 并均以赋值
• 原型上有一个getFullName方法和一个构造器

将代码做一个小更改，在构造器上添加一个return

function Person(firtName, lastName) {
  this.firtName = firtName;
  this.lastName = lastName;

  return {
    fullName: `${this.firtName} ${this.lastName}`
  };
}

从控制台可以看出，返回的就是一个普通的object对象. 这个对象就是执行return时的结果。

继续改变一下代码，使它返回一个Number或者String类型。继续看控制台：

function Person(firtName, lastName) {
  this.firtName = firtName;
  this.lastName = lastName;
  return 'string'
}

可以看到, 和没有写return是一样的.，返回的都是新创建的Person实例。

综上可得：

1. 创建一个新对象
2. 继承父类原型上的方法
3. 添加父类的属性到新的对象上并初始化，保存方法的执行结果。
4. 如果执行结果有返回值并且是一个对象,，返回执行的结果， 否则返回新创建的对象。

知道过程后，手写就变的简单了

function myNew(obj, ...rest){
  // 基于obj的原型创建一个新的对象
  const newObj = Object.create(obj.prototype);

  // 添加属性到新创建的newObj上, 并获取obj函数执行的结果.
  const res = obj.apply(newObj, rest);

  // 如果执行结果有返回值并且是一个对象, 返回执行的结果, 否则, 返回新创建的对象
  if (res && (typeof res === "object" || typeof res === "function")) { // 对返回null 和function做处理处理
    return res;
  }
  return newObj
}

使用：

const tb2 = myNew(Person, 'xing', 'mingzi')

转载掘金–陈天宝

以上转载如有侵权，请联系删除，谢谢！