react中constructor( )和super( )到底是个啥？

react中这两个API出镜率超级高，但是一直不太懂这到底是干嘛的，有什么用。今天整理一遍发现，不是新知识读不懂，而是我的原型链知识点太不扎实了。本着方便他人顺带着娱乐自己的原则，特整理这篇文章，以备后查！

constructor( )——构造方法
这是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。

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

//构造函数People
function People (name,age){
this.name = name;
this.age = age
}
People.prototype.sayName = function(){
return ‘我的名字是：’+this.name;
}

//创建新的子类p1
let p1 = new People('harrisking',23);

但是在ES6中，可以通过class 来实现。举个例子：

class People{

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

    sayName(){
        return '我的名字是：'+this.name;
    }
}
//创建新的子类p1
let p1 = new People('harrisking',23);

上面两个例子等价。其实class方法完全就是对象原型的语法糖，效果是完全一样的。

原型链知识我们一起复习一下：

在这里插入图片描述

仔细看这图你就会发现，也有constructor，这个之前我也知道，但是死活没想起来他们俩是一个东西。好吧，这回我们就清楚了，构造方法constructor( )其实就是构造函数本身。

super( ) ——继承
在class方法中，继承是使用 extends 关键字来实现的。举例如下：

class People{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    sayName(){
        return '我的名字是：'+this.name;
    }
}

class har extends People{
    constructor(name,age,sex){
        super(name,age);//调用父类的constructor(name,age)
        this.sex = sex;
    }
    haha(){
        return this.sex + ' ' + super.sayName();//调用父类的sayName() 
    }
}

上面的例子中，出现了 super( )，子类必须在 constructor( )调用 super( )方法，否则新建实例时会报错。（不要问为什么！）

好吧我憋不住了，我还是告诉你为什么吧。报错的原因是：子类是没有自己的 this 对象的，它只能继承自父类的 this 对象，然后对其进行加工，而super( )就是将父类中的this对象继承给子类的。没有 super，子类就得不到 this 对象，没有 this 对象而要对 this 进行处理，能不报错吗？

class Ha{/*某些代码*/}

class haha extends Ha{
    constructor(){}
}

let haha1 = new haha();ReferenceError报错

上面的代码中，haha继承了父类 Ha，但是他的构造函数没有调用 super( )方法，导致新建实例时报错。

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

复习一个重要知识点——ES5中new到底做了些啥？
当一个构造函数前加上new的时候，背地里来做了四件事：
1.生成一个空的对象并将其作为 this；
2.将空对象的 proto 指向构造函数的 prototype；
3.运行该构造函数；
4.如果构造函数没有 return 或者 return 一个返回 this 值是基本类型，则返回this；如果 return 一个引用类型，则返回这个引用类型。
原来写过文章提到过，需要请点击!

简单解释，就是在ES5的继承中，先创建子类的实例对象this，然后再将父类的方法添加到this上（ Parent.apply(this) ）。而ES6采用的是先创建父类的实例this（故要先调用 super( )方法），完后再用子类的构造函数修改this。

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

关于这两个方法，你懂了吗？

THE END!

react中constructor( )和super( )到底是个啥？

猜你喜欢