重学JS系列: new 操作符，和实现一个 new 操作符

1. new 的特点
2. 如果实现一个 new 操作符

一、new 运算符

new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作：

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

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

var car1 = new Car('Eagle', 'Talon TSi', 1993);

console.log(car1.make);
// expected output: "Eagle"

二、手工实现一个 new 操作符

实现步骤

1. 上面说了 new操作符会返回一个对象， 所以我们需要在创建一个 object
2. 那么我们需要将构造函数的的原型 设置到另一个对象上
3. 将创建的对象 作为this的上下文
4. 有属性返回属性， 没有则返回 this

function  create(Con, ...args) {
    let obj = {};
    Object.setPrototypeOf(obj, Con.prototype)
    let result = Con.apply(obj, args)
    return result instanceof Object ? result : obj
}

上面的函数 第一个参数作为构造函数传入， 接下来的参数被构造函数使用
然后按上面的1、2、3、4步骤实现

• 创建一个 空对象
• 将 构造函数的原型 设置给 空对象。 等用于 obj.__proto__ = Con.prototype
• 将 obj 绑定到构造函数上， 并且通过剩余参数传入
• 最后 判断 返回值是否为对象， 如果为对象 则 返回使用构造函数的result， 否则就返回 obj

那我们来看看最后实现的效果吧

function Test(name, age) {
    this.name = name
    this.age = age
}

Test.prototype.intr = function () {
    console.log(`my name is ${this.name}, i'm ${this.age} years old`)
}

const me = create(Test, 'gavin', '21')
console.log(me.name)  //output: gavin
console.log(me.age)  //output: 21

me.intr()  // my name is gavin, i'm 21 years old``

参考
web docs: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new
掘金 yck: https://juejin.im/post/5c7b963ae51d453eb173896e