导航：首页 > 开发技术 >

JavaScript中super的功能介绍

发表于：2026-10-31 作者：千家信息网编辑

千家信息网最后更新 2026年10月31日，本篇内容主要讲解"JavaScript中super的功能介绍"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"JavaScript中super的功能介绍"吧!

千家信息网最后更新 2026年10月31日JavaScript中super的功能介绍

本篇内容主要讲解"JavaScript中super的功能介绍"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"JavaScript中super的功能介绍"吧!

首先在我的职业生涯中写过的super(props) 自己都记不清：

class Checkbox extends React.Component { constructor(props) {  super(props);  this.state = { isOn: true }; } // ...}

当然，在类字段提案（class fields proposal）中建议让我们跳过这个开头：

class Checkbox extends React.Component { state = { isOn: true }; // ...}

在2015年 React 0.13 增加对普通类的支持时，曾经打算用这样的语法。定义constructor和调用super(props) 始终是一个临时的解决方案，可能要等到类字段能够提供在工程学上不那么反人类的替代方案。

不过还是让我们回到前面这个例子，这次只用ES2015的特性：

class Checkbox extends React.Component { constructor(props) {  super(props);  this.state = { isOn: true }; } // ...}

为什么我们要调用super？可以调用它吗？如果必须要调用，不传递prop参数会发生什么？还有其他参数吗？接下来我们试一试：

在 JavaScript 中，super 指的是父类的构造函数。（在我们的示例中，它指向React.Component 的实现。）

重要的是，在调用父类构造函数之前，你不能在构造函数中使用this。 JavaScript 是不会让你这样做的：

class Checkbox extends React.Component { constructor(props) {  // 这里还不能用 `this`   super(props);  // 现在可以用了  this.state = { isOn: true }; } // ...}

为什么 JavaScript 在使用this之前要先强制执行父构造函数，有一个很好的理由能够解释。先看下面这个类的结构：

class Person { constructor(name) {  this.name = name; }}class PolitePerson extends Person { constructor(name) {  this.greetColleagues(); //这行代码是无效的，后面告诉你为什么  super(name); } greetColleagues() {  alert('Good morning folks!'); }}

如果允许在调用super之前使用this的话。一段时间后，我们可能会修改greetColleagues，并在提示消息中添加Person的name：

 greetColleagues() {  alert('Good morning folks!');  alert('My name is ' + this.name + ', nice to meet you!'); }

但是我们忘记了super()在设置this.name之前先调用了this.greetColleagues()。所以此时this.name还没有定义！如你所见，像这样的代码很难想到问题出在哪里。

为了避免这类陷阱，JavaScript 强制要求：如果想在构造函数中使用this，你必须首先调用super。先让父类做完自己的事！这种限制同样也适用于被定义为类的 React 组件：

 constructor(props) {  super(props);  // 在这里可以用 `this`  this.state = { isOn: true }; }

这里又给我们留下了另一个问题：为什么要传props参数？

你可能认为将props传给super是必要的，这可以使React.Component的构造函数可以初始化this.props：

// Inside Reactclass Component { constructor(props) {  this.props = props;  // ... }}

这与正确答案很接近了 -- 实际上它就是这么做的。

但是不知道为什么，即便是你调用super时没有传递props参数，仍然可以在render和其他方法中访问this.props。（不信你可以亲自去试试！）

这是究竟是为什么呢？事实证明，在调用构造函数后，React也会在实例上分配props：

 // Inside React const instance = new YourComponent(props); instance.props = props;

因此，即使你忘记将props传给super()，React 仍然会在之后设置它们。这是有原因的。

当 React 添加对类的支持时，它不仅仅增加了对 ES6 类的支持。它的目标是尽可能广泛的支持类抽象。目前还不清楚 ClojureScript、CoffeeScript、ES6、Fable、Scala.js、TypeScript或其他解决方案是如何相对成功地定义组件的。所以 React 故意不关心是否需要调用super()-- 即使是ES6类。

那么这是不是就意味着你可以写super()而不是super(props)呢？

可能不行，因为它仍然是令人困惑的。当然，React 稍后会在你的构造函数运行后分配this.props，但是在调用super() 之后和构造函数结束前这段区间内this.props仍然是未定义的：

// Inside Reactclass Component { constructor(props) {  this.props = props;  // ... }}// Inside your codeclass Button extends React.Component { constructor(props) {  super(); //我们忘记了传递 props 参数  console.log(props);   // {}  console.log(this.props); // undefined  } // ...}

如果这种情况发生在从构造函数调用的某个方法中，可能会给调试工作带来很大的麻烦。这就是为什么我建议总是调用super(props) ，即使在没有必要的情况之下：

class Button extends React.Component { constructor(props) {  super(props); // 传递了 props 参数  console.log(props);   // {}  console.log(this.props); // {} } // ...}

这样就确保了能够在构造函数退出之前设置好this.props。

最后一点是长期以来 React 用户总是感到好奇的。

你可能已经注意到，当你在类中使用Context API时（无论是旧版的contextTypes或在 React 16.6中新添加的 contextType API），context 会作为第二个参数传递给构造函数。

那么为什么我们不写成super(props, context) 呢？我们可以这样做，但是使用context的频率较低，所以这个坑并没有那么多影响。

根据类字段提案的说明，这些坑大部分都会消失。如果没有显式构造函数，则会自动传递所有参数。这允许在像state = {} 这样的表达式中包含对this.props或this.context的引用（如果有必要的话）。

而有了 Hooks 之后，我们甚至不再有super或this。不过这是另外一个的话题了。

到此，相信大家对"JavaScript中super的功能介绍"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

很赞哦！