13

I'm learning React.js, and I see the super keyword used a lot in constructor functions.

I understand that super allows a subclass to have access to the this keyword. However, I can't find much more explanation.

  • Why does calling super(), magically give my class access to this?
  • Why does the super keyword bind this to the context of the class?
  • When I'm not dealing with a subclass, why don't I have to call super()?
dǝɥɔS ʇoıןןƎ
  • 1,674
  • 5
  • 19
  • 42
thatDubstepSound
  • 337
  • 5
  • 18
  • 1
    You can look up keywords and most other things on [**MDN**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super) – adeneo Feb 01 '17 at 01:35

2 Answers2

7

Sorry for the pic in Japanese, but looks easy to understand.

When you use super function in your class member functions, extends keyword is also expected to be used. When you call super like super(args) in the extending class, it calls the constructor of the extended class. You can also call the other member functions of the extended class with super.methods(args), not super(args).

extends and super (From https://liginc.co.jp/266587)

UPDATE

FYI: What's the difference between "super()" and "super(props)" in React when using es6 classes? This discussion explains well about how super in react component affects this context constraint. Good to read.

Community
  • 1
  • 1
IzumiSy
  • 1,508
  • 9
  • 17
5

Actually, a super call in the constructor calls the constructor of the parent class. You can have access to this independently of using it or not, but in the context of react, this properties associated with this, like this.props and this.state are set and configured properly in the React.Component class constructor. So that's why you must call super first, so that this is properly setup.

Luan Nico
  • 5,376
  • 2
  • 30
  • 60
  • Thanks for that. I'm going to play around a little with using 'this' to test how super() sets it up, but that makes alot more conceptual sense. – thatDubstepSound Feb 02 '17 at 14:48
  • so following this logic, we would assume super() could be avoid using an arrow function since the arrow function will automatically be translucent to the parent's context? – Webwoman Mar 27 '19 at 23:11
  • @Webwoman, I don't think it makes sense for the constructor to be an arrow function, because on a constructor you will most certainly desire use a `this` reference... Maybe I didn't understood what you meant... – Luan Nico Mar 27 '19 at 23:31
  • @LuanNico I mean ES6 arrow functions can't be bound to a this keyword, so it will lexically go up a scope, and use the value of this in the scope in which it was defined, in this case, the component itself ? https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&uact=8&ved=2ahUKEwiFqI3exKPhAhUByIUKHYjBDHAQFjACegQIDBAL&url=https%3A%2F%2Fmedium.freecodecamp.org%2Fwhen-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26&usg=AOvVaw2zB96UnxxpF8uPjuL_rl3K. that was just to make some theoretical assumption :). – Webwoman Mar 28 '19 at 00:05