super() 在没有任何参数的情况下做什么？答案

【问题标题】：what does super() do without any arguments?super() 在没有任何参数的情况下做什么？
【发布时间】：2017-02-10 21:16:47
【问题描述】：

我正在学习 docs 的反应，但不确定 super() 在此示例中的作用。通常，它不是将传递的参数用于创建一个新实例，然后调用 React.Component 的构造函数方法将这些参数合并到实例中吗？没有任何参数它会做什么？

class LikeButton extends React.Component {
  constructor() {
    super();
    this.state = {
      liked: false
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({liked: !this.state.liked});
  }
  render() {
    const text = this.state.liked ? 'liked' : 'haven\'t liked';
    return (
      <div onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </div>
    );
  }
}

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

【问题讨论】：

super()，在大多数基于类的语言中意味着调用父级的构造函数。所以它会调用 React.Component 的构造函数。
超级构造函数是否具有允许零参数有意义的默认参数（隐式或其他）？这个好像可以通过查看源代码来解决。
React.Component 构造函数接受一个参数facebook.github.io/react/docs/…
我相信这回答了你的问题：stackoverflow.com/a/34995257/1517783

标签： javascript reactjs ecmascript-6 super

【解决方案1】：

在 ES6 中，如果派生类有构造函数，则必须调用 super()。在 react 中，所有组件都从 Component 类扩展而来。

您实际上并不需要每个 ES6/react 类的构造函数。如果没有定义自定义构造函数，它将使用default constructor。对于基类，它是：

constructor() {}

而对于派生类，默认构造函数是：

constructor(...args) {
  super(...args);
}

您还需要在访问this 之前调用super()，因为在调用super() 之前不会初始化this。

在 react 中使用自定义构造函数有几个原因。一种是您可以使用this.state = ... 而不是使用getInitialState 生命周期方法在构造函数中设置初始状态。

您还可以在构造函数中使用this.someClassMethod = this.someClassMethod.bind(this) 绑定类方法。实际上最好在构造函数中绑定方法，因为它们只会被创建一次。否则，如果您调用 bind 或使用箭头函数在构造函数之外的任何位置绑定方法（如在 render 方法中），它实际上最终会在每次渲染时创建该函数的新实例。阅读更多关于 here 的信息。

如果要在构造函数中使用this.props，则需要以props作为参数调用super：

constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
}

如果你不这样做，那么 this.props 在构造函数中是未定义的。但是，您仍然可以在构造函数之外的类中的任何其他位置访问this.props，而无需在构造函数中对其进行任何操作。

【讨论】：

【解决方案2】：

JavaScript 中的super 关键字用于调用父类的方法。 super() 本身在构造函数中用于调用父构造函数。例如：

class Animal {
  
  constructor(age) {
    console.log('Animal being made');
    this.age = age;
  }
  
  returnAge() {
    return this.age;
  }
  
}

class Dog extends Animal {

  constructor (age){
    super(age);
  }
  
  logAgeDog () {
    console.log(`This dog is: ${ super.returnAge()} years old`);
  }
  
}

const dog = new Dog(5);


console.log(dog);

dog.logAgeDog();

在这个例子中，我们有一个 Dog 类，其中 extends 一个 Animal 类。 Dog 类使用了两次super 关键字。第一次出现在构造函数中，当在构造函数中使用super() 时，它会调用父类构造函数。因此，我们必须将年龄属性作为参数。现在 Dog 成功地拥有了一个 age 属性。

我们还可以在构造函数之外使用super 来访问父级的“类”（即原型）属性和方法。我们在 Dog 类中的 logAgeDog 函数中使用它。我们使用如下代码：

super.returnAge();

你应该这样理解：

Animal.returnAge();     // superClass.returnAge()

为什么我在 React 中需要这个？

在实现构造函数时，仅需要 React 中的 super() 关键字。您必须执行以下操作：

constructor(props) {
  super(props);
  // Don't call this.setState() here!
}

名为Component 的父类需要自己进行一些初始化才能使 React 正常工作。如果您在没有super(props) 的情况下实现构造函数，则Component 中的this.props 将是undefined，这可能会导致错误。

【讨论】：