前言
如果大家经常使用 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 关键字，否则会报错。
