react中super的作用
在React中，super是一个关键字，其作用是调用父类（通常是组件）的构造函数。super关键字必须在构造函数体的顶部使用，并且在使用this之前调用。它在子类构造函数中同样可用。
super关键字的主要作用有以下几个方面。
1.调用父类的构造函数
当一个类被定义为子类时，它继承了父类的属性和方法。然而，在子类的构造函数中，我们需要调用父类的构造函数，以便在实例化子类对象时，能够正确地初始化父类的成员变量和执行父类的一些初始化操作。通过使用super关键字，我们可以调用父类的构造函数，确保子类实例中包含了父类的实例属性和方法。
例如，考虑以下的代码：
```javascript
class Parent
constructor(name)
this.name = name;
}
class Child extends Parent
constructor(name, age)
super(name);
this.age = age;
}
```
在上述代码中，Parent是一个父类，Child是一个子类，子类通过extends关键字继承了父类。在Child的构造函数中，super(name)调用了父类的构造函数，并传递了参数name。这样，当我们实例化Child类时，父类的构造函数会被调用，并且将参数name设置为实例的属性。
2.访问父类的属性和方法
通过super关键字，我们可以在子类中访问父类的成员变量和方法。在子类的方法中，可以使用super关键字来引用父类的方法。
例如：
```javascript
class Parent
constructor(name)
this.name = name;
}
sayHell
console.log(`Hello, ${this.name}!`);
}
class Child extends Parent
constructor(name, age)
super(name);
this.age = age;
}
sayHell
super.sayHello(;
console.log(`I am ${this.age} years old.`);
}
const child = new Child('Alice', 10);
child.sayHello(;
```
const的作用在上述代码中，Child类继承了Parent类，并且覆盖了父类的sayHello方法。在子类的sayHello方法中，我们使用super关键字来调用父类的sayHello方法。这样在调用child.sayHello(时，首先会输出"Hello, Alice!"，然后输出"I am 10 years old."。
通过super关键字，我们可以在子类中扩展父类的行为，而不是完全重写父类的方法。
3.在子类构造函数中使用this之前调用super
在ECMAScript 2024之前，构造函数中没有this之前的super调用，会导致错误。因此，一定要在使用this之前调用super。
例如：
```javascript
class Parent
constructo
this.name = 'Parent';
}
class Child extends Parent
constructo
console.log(this); // Error: 'this' is not allowed before super
super(;
}
const child = new Child(;
```
在上述代码中，Child类的构造函数中没有在使用this之前调用super，因此会导致错误。正确的写法是先调用super(，然后才能使用this。
4.在非构造函数的方法中使用super关键字
除了在构造函数中使用super关键字来调用父类的构造函数，还可以在子类的非构造函数方法中使用super关键字来调用父类的同名方法。
例如：
```javascript

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。