Add a section for super and extends (mbeaudru#71)

* Add a Super section

Will add a `extends` section soon, to close mbeaudru#49.

* Add reference for `super`

* Add an `Extends` section

* Merged with current master and improved typos/notion

README.md

@@ -90,20 +90,23 @@ When you struggle to understand a notion, I suggest you look for answers on the
     + [Class](#class)
       - [Samples](#samples)
       - [External resources](#external-resources-7)
+    + [Extends and super keywords](#extends-and-super-keywords)
+      - [Sample Code](#sample-code-6)
+      - [External Resources](#external-resources-8)
     + [Async Await](#async-await)
-      - [Sample code](#sample-code-6)
+      - [Sample code](#sample-code-7)
       - [Explanation with sample code](#explanation-with-sample-code-2)
       - [Error handling](#error-handling)
-      - [External resources](#external-resources-8)
-    + [Truthy / Falsy](#truthy--falsy)
       - [External resources](#external-resources-9)
+    + [Truthy / Falsy](#truthy--falsy)
+      - [External resources](#external-resources-10)
     + [Static Methods](#static-methods)
       - [Short Explanation](#short-explanation-1)
-      - [Sample Code](#sample-code-7)
+      - [Sample Code](#sample-code-8)
       - [Detailed Explanation](#detailed-explanation-2)
         * [Calling other static methods from a static method](#calling-other-static-methods-from-a-static-method)
         * [Calling static methods from non-static methods](#calling-static-methods-from-non-static-methods)
-      - [External resources](#external-resources-10)
+      - [External resources](#external-resources-11)
   * [Glossary](#glossary)
     + [Scope](#-scope)
     + [Variable mutation](#-variable-mutation)
@@ -1260,6 +1263,82 @@ For classes understanding:
 - [ES6 Features - Classes](http://es6-features.org/#ClassDefinition)
 - [JavaScript Classes - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
 
+### `Extends` and `super` keywords
+
+The `extends` keyword is used in class declarations or class expressions to create a class which is a child of another class ([Ref: MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends)). The subclass inherits all the properties of the superclass and additionally can add new properties or modify the inherited ones.
+
+The `super` keyword is used to call functions on an object's parent, including its constructor.
+
+- `super` keyword must be used before the `this` keyword is used in constructor
+- Invoking `super()` calls the parent class constructor. If you want to pass some arguments in a class's constructor to its parent's constructor, you call it with `super(arguments)`.
+- If the parent class have a method (even static) called `X`, you can use `super.X()` to call it in a child class.
+
+#### Sample Code
+
+```js
+class Polygon {
+  constructor(height, width) {
+    this.name = 'Polygon';
+    this.height = height;
+    this.width = width;
+  }
+
+  getHelloPhrase() {
+    return `Hi, I am a ${this.name}`;
+  }
+}
+
+class Square extends Polygon {
+  constructor(length) {
+    // Here, it calls the parent class' constructor with lengths
+    // provided for the Polygon's width and height
+    super(length, length);
+    // Note: In derived classes, super() must be called before you
+    // can use 'this'. Leaving this out will cause a reference error.
+    this.name = 'Square';
+    this.length = length;
+  }
+
+  getCustomHelloPhrase() {
+    const polygonPhrase = super.getHelloPhrase(); // accessing parent method with super.X() syntax
+    return `${polygonPhrase} with a lenght of ${this.length}`;
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+}
+
+const mySquare = new Square(10);
+console.log(mySquare.area) // 100
+console.log(mySquare.getHelloPhrase()) // 'Hi, I am a Square' -- Square inherits from Polygon and has access to its methods
+console.log(mySquare.getCustomHelloPhrase()) // 'Hi, I am a Square with a lenght of 10'
+```
+
+**Note :** If we had tried to use `this` before calling `super()` in Square class, a ReferenceError would have been raised:
+
+```js
+class Square extends Polygon {
+  constructor(length) {
+    this.height; // ReferenceError, super needs to be called first!
+
+    // Here, it calls the parent class' constructor with lengths
+    // provided for the Polygon's width and height
+    super(length, length);
+
+    // Note: In derived classes, super() must be called before you
+    // can use 'this'. Leaving this out will cause a reference error.
+    this.name = 'Square';
+  }
+}
+```
+
+#### External Resources
+
+- [Extends - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends)
+- [Super operator - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)
+- [Inheritance - MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance)
+
 ### Async Await
 
 In addition to [Promises](#promises), there is a new syntax you might encounter to handle asynchronous code named *async / await*.