前端小技巧: 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} 这里要注意下
-