首先 super() 是在 es6的class(类)的方法创建组件出现
下面是分别是构造函数创建组件和class(类)创建组件
构造函数方法创建组件
在构造函数方法中,在组件接收参数的时候,props作为函数的形参,在 function 构造函数中不存在this的指向问题
function Hello(props) { const { userinfo } = props; return <p>组件和组件传值 ----------- {userinfo.name}</p>; } const userinfo = { name: "组件传递的数据", age: 18, }; ReactDOM.render( <div> react组件和组件传值<Hello userinfo={userinfo}></Hello> </div>, document.getElementById("app") );
es6 class(类) 方法创建组件
这里需要掌握原型链,对原型链不熟悉的先去看下js中对象的原型,前面随笔中也有两次讲到js原型
1 // 构造函数 会 默认生成 一个原型对象 2 function Person(name,) { 3 this.name = name; 4 } 5 console.log(Person); // 构造函数本身 6 console.log(Person.prototype) // 指向原型对象 7 console.log(Person.prototype.constructor); // 指向 构造函数本身 8 Person("范顺");
在class(类) 方法中,同理可得 constructor(props),
子类继承父类的属性:需要使用super()继续父类的属性,同时创建this(子类本身没有this);
所以super(props)的作用就是在父类的构造函数中给props赋值一个对象this.props=props这样就能在它的下面定义你要用到的属性了,然而其他的由于没有传参就直接赋值为undefind
class Hello extends React.Component { constructor(props) { super(props) // 子类继承父类,this console.log(props) } render() { return null; } }
拓展部分:理解 super( ) ——继承
在class方法中,继承是使用 extends
关键字来实现的
1 class People{ 2 constructor(name,age){ 3 this.name = name; 4 this.age = age; 5 } 6 sayName(){ 7 return '我的名字是:'+this.name; 8 } 9 } 10 11 class har extends People{ 12 constructor(name,age,sex){ 13 super(name,age);//调用父类的constructor(name,age) 14 this.sex = sex; 15 } 16 haha(){ 17 return this.sex + ' ' + super.sayName();//调用父类的sayName() 18 } 19 }
上面的例子中,出现了 super( )
,子类 必须 在 constructor( )
调用 super( )
方法,否则新建实例时会报错。(不要问为什么!)
报错的原因是:子类是没有自己的 this
对象的,它只能继承自父类的 this
对象,然后对其进行加工,而super( )
就是将父类中的this对象继承给子类的。没有 super
,子类就得不到 this
对象,没有 this
对象而要对 this
进行处理,能不报错吗?
1 class Ha{/*某些代码*/} 2 3 class haha extends Ha{ 4 constructor(){} 5 } 6 7 let haha1 = new haha();ReferenceError报错
出现上面情况的总原因是,ES5的继承机制与ES6完全不同。
复习一个重要知识点——ES5中new到底做了些啥?
当一个构造函数前加上new的时候,背地里来做了四件事:
1.生成一个空的对象并将其作为 this;
2.将空对象的 __proto__
指向构造函数的 prototype
;
3.运行该构造函数;
4.如果构造函数没有 return 或者 return 一个返回 this 值是基本类型,则返回this;如果 return 一个引用类型,则返回这个引用类型。