react中super()的理解

谁借莪１个温暖的怀抱￠ 2022-09-06 14:20 132阅读 0赞

**es6 class(类) 方法创建组件**

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("范顺");

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

在class(类) 方法中，同理可得 constructor(props)，

**子类继承父类的属性:需要使用super()继续父类的属性，同时创建this(子类本身没有this);**

**所以super(props)的作用就是在父类的构造函数中给props赋值一个对象this.props=props这样就能在它的下面定义你要用到的属性了，然而其他的由于没有传参就直接赋值为undefind**

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

class Hello extends React.Component {
      constructor(props) {
        super(props)         // 子类继承父类，this
        console.log(props)
      }
      render() {
        return null;
      }
    }

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

拓展部分：理解 super( ) ——继承

在class方法中，继承是使用 `extends` 关键字来实现的

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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     }

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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

报错的原因是：子类是没有自己的 `this` 对象的，它只能继承自父类的 `this` 对象，然后对其进行加工，而`super( )`就是将父类中的this对象继承给子类的。没有 `super`，子类就得不到 `this` 对象，没有 `this` 对象而要对 `this` 进行处理，能不报错吗？

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

1     class Ha{/*某些代码*/}
    2 
    3     class haha extends Ha{
    4         constructor(){}
    5     }
    6 
    7     let haha1 = new haha();ReferenceError报错

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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

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

[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20220829/9643b485611b4bb0a699c982dfaa9f06.png