react中constructor( )和super( )详解

// 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 关键字，否则会报错。
  
  代码写完了，顺便送个女朋友。不得关注、点赞转发一波？