new一个构造函数时做了哪些事件?
《JavaScript模式》这本书中,new的过程讲到,当我们new一个构造器,主要有三步:
- 创建一个空对象,将它的引用赋给 this,继承函数的原型。
- 通过 this 将属性和方法添加至这个对象
- 最后返回 this 指向的新对象,也就是实例(如果没有手动返回其他的对象)
winter大神的重学前端专栏中也描述过new的过程
- 以构造器的prototype属性为原型,创建新对象;
- 将this(也就是新对象)和调用参数传给构造器并执行;
- 如果构造器没有手动返回对象,则返回第一步创建的新对象,如果有,则舍弃掉第一步创建的新对象,返回手动return的对象。
知道了new过程中会新建对象,此对象会继承构造器的原型与原型上的属性,最后它会被作为实例返回这样一个过程,最后手动实现简单的new方法。
console.log('手动实现简单new方法')
// 构造器函数
let Parent = function (name, age) {
this.name = name;
this.age = age;
this.objs = {a:1};
};
Parent.prototype.getName = function () {
console.log(this.name);
};
//实现new方法
let newClass = function (Parent, ...rest) {
// 1.寄生出一个新的父类Parent空对象,并将空对象指向Parent原型。【寄生继承】
let child = Object.create(Parent.prototype);
// 2.将子类child指向父类Parent,并把参数带过去。【借用构造函数继承】
let result = Parent.call(child, ...rest);
// 3.如果构造器没有手动返回对象,则返回第一步的对象
return typeof result === 'object' ? result : child;
};
//创建实例,将构造函数Parent与形参作为参数传入
const child = newClass(Parent, 'hjm', 18);
child.getName() // hjm;
child.objs.b = 2
console.log(child.name, child.age, child.objs) // hjm 18 {a: 1, b: 2}