js关于new做了哪些事件

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}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容