前端小技巧: TS实现new出一个对象的内部过程

new 一个对象，写代码实现内部过程

• class 是 function 的语法糖
• new 一个对象的过程
  • 创建一个空对象obj, 继承构造函数的原型
  • 执行构造函数 (将obj作为this)
  • 返回 obj

export function customNew<T>(constructor:Function, ...args: any[]): T {
  // 1. 创建一个空对象，继承 constructor 的原型
  const obj = Object.create(constructor.prototype)
  // 2. 将 obj 作为 this 执行 constructor 传入参数
  constructor.apply(obj, args)
  // 3. 返回 obj
  return obj
}

class Foo {
  name: string
  city: string
  n: number
  
  constructor(name: string, n: number) {
    this.name = name
    this.city = '北京'
    this.n = n
  }

  getName() {
    return this.name
  }
}

// 下面两者保持一致
const f = customNew<Foo>(Foo, 'www', 32)
// const f = new Foo('www', 200)

console.log(f)
console.info(f.getName())

• Object.create 和 {} 有什么区别?

  • {} 创建空对象，原型指向 Object.prototype

  • Object.create 创建空对象，原型指向传入的参数

    const obj1 = {}
    obj1.__proto__ = Object.prototype // true
    
    const obj2 = Object.create({x: 100})
    obj2.__proto__ //  指向 {x:100} 这里要注意下