为啥react的组件要super
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为啥react的组件要super相关的知识,希望对你有一定的参考价值。
原因
调用super的原因:在ES6中,在子类的constructor中必须先调用super才能引用this。
super(props)的目的:在constructor中可以使用this.props。
最后,可以看下React文档,里面有一段:
在es6中实现继承,直接调用super(name),就可以直接继承父类的属性和方法,所以super作用就相当于上述的实现继承的步骤,不过es6提供了super语法糖,简单化了继承的实现。
调用super的原因:在ES6中,在子类的constructor中必须先调用super才能引用this
super(props)的目的:在constructor中可以使用this.props
最后,可以看下React文档,里面有一段
Class components should always call the base constructor with props.
解释二:
假设在es5要实现继承,首先定义一个父类:
//父类
function sup(name)
this.name = name
//定义父类原型上的方法
sup.prototype.printName = function ()
console.log(this.name)
现在再定义他sup的子类,继承sup的属性和方法:
function sub(name,age)
sup.call(this,name) //调用call方法,继承sup超类属性
this.age = age
sub.prototype = new sup //把子类sub的原型对象指向父类的实例化对象,这样即可以继承父类sup原型对象上的属性和方法
sub.prototype.constructor = sub //这时会有个问题子类的constructor属性会指向sup,手动把constructor属性指向子类sub
//这时就可以在父类的基础上添加属性和方法了
sub.prototype.printAge = function ()
console.log(this.age)
这时调用父类生成一个实例化对象:
let jack = new sub('jack',20)
jack.printName() //输出 : jack
jack.printAge() //输出 : 20
这就是es5中实现继承的方法。而在es6中实现继承:
class sup
constructor(name)
this.name = name
printName()
console.log(this.name)
class sub extends sup
constructor(name,age)
super(name)
this.age = age
printAge()
console.log(this.age)
let jack = new sub('jack',20)
jack.printName() //输出 : jack
jack.printAge() //输出 : 20
对比es5和es6可以发现在es5实现继承,在es5中实现继承:
首先得先调用函数的call方法把父类的属性给继承过来
通过new关键字继承父类原型的对象上的方法和属性
最后再通过手动指定constructor属性指向子类对象
而在es6中实现继承,直接调用super(name),就可以直接继承父类的属性和方法,所以super作用就相当于上述的实现继承的步骤,不过es6提供了super语法糖,简单化了继承的实现
以上是关于为啥react的组件要super的主要内容,如果未能解决你的问题,请参考以下文章
React,为啥在 ES6 类构造函数中使用 super(props)? [复制]