前言

如果大家经常使用 react() 做项目，像constructor( )与super( )肯定是司空见惯了，哪哪都有，但是很多人都是复制粘贴一把梭，并不知道这是干啥的与底层原理。

实际上这不是 react() 的专属玩意，而是JS自带的，原型链相关的知识，今天来把它撸一撸。

constructor( )

这是ES6对类(Class)的默认方法，一般用于数据初始化，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加。

ES5中，JavaScript是没有继承的写法的，因此，通过使用prototype来达到此目的。

//构造函数
 function Person (name,age){
      this.name = name;
      this.age = age;
  }
   Person.prototype.getAge= function(){
       return '俺的年龄是：'+this.age;
   }

    //创建新的子类p1
    let person1 = new Person('小明',18);


    // console.log(person1.constructor) 指向Person 如下
    ƒ Person (name,age){
       this.name = name;
       this.age = age;
    }

ES6的实现： 

  class Person {
      //构造方法constructor就等于上面的构造函数Person 
      constructor(name,age){
            this.name = name;
            this.age = age;
        }

        getAge(){
            return '俺的年龄是：'+this.age;
        }
    }
    //创建新的子类p1
    let person1 = new Person('小明',18);

 这两个例子效果是一毛一样的，只是写法不同

原型链

这个图咋一看有点复杂，如果看不懂，贴心的我还有一遍关于原型链的教程，先看这个 => JS原型链详解

如果你看懂了，那么将会get到这项技能：构造方法constructor() = 构造函数本身 (上面我也进行了打印，你应该懂的)

super()

super() = 继承，这玩意就是用来继承的，继承它的父级

在class方法中，继承是使用 extends 关键字来实现的

    class Person{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        getAge(){
            return '我的年龄是：'+ this.age;
        }
    }

    class demo extends Person{
        constructor(name,age,sex){
            super(name,age);   // 调用父类的constructor(name,age)
            this.sex = sex;
        }
        fn(){
            return this.sex + ' ' + super.getAge();    // 调用父类的getAge() 
        }
    }

上面的例子中，有super()，子类必须在constructor() 中调用 super() ，否则新建实例时会报错。不然就继承不了父类的香火了，刚刚说了这玩意是用来继承的。

报错的原因是：子类没有自己的 this 对象的，它只能继承自父类的 this 对象，然后对其进行加工，而 super() 就是将父类中的 this 对象继承给子类的。

没有继承，子类就得不到 this 对象，没有 this 对象而要对 this 进行处理，如果能成功的话，那只能说明隔壁老王有问题。

经典的报错例子：

    class parent{}

    class son extends parent{
        constructor(){
                
        }
    }

    let son= new parent();  // ReferenceError报错

出现上面情况的总原因是，ES5的继承机制与ES6完全不同。

ES5中的new是干嘛的？

1. 生成一个空的对象（在内存中）
2. 原型的执行，确定对象o的原型链，将空对象的_proto_指向构造函数的 prototype
3. 改变this指向
4. 如果构造函数没有 return 或者 return 一个返回 this 值是基本类型，则返回this；如果 return 一个引用类型，则返回这个引用类型。

ES5的继承中，先创建子类的实例对象this，然后再将父类的方法添加到this上（Parent.call(this)）

而ES6采用的是先创建父类的实例 this（故要先调用super()），完后再用子类的构造函数修改this

FAQ

• 子类如果没有 constructor()，该方法会被默认添加，即任何的子类都有 constructor()，无论定义没定义，它就在那里，不离不弃。
• 在子类的构造函数 constructor() 中，只有调用 super() 方法之后，才可以使用 this 关键字，否则会报错。

代码写完了，顺便送个女朋友。不得关注、点赞转发一波？