“extends” keyword

In traditional programming languages (Java), extends keyword is used to define a child class (subclass, derived class) that inherits properties (methods and variables) from a parent class (super class, base class). In ECMAScript6, we have extends keyword to create a child class from a parent class. I should highlight the fact that JavaScript makes use of prototype delegation (instead of inheritance) to invoke properties (methods) on parent class from an instance of child class. This behavior of prototype delegation is often misunderstood as inheritance by some developers.

Tool: UMLet (GNU Linux client)

In the code snippet above, when we invoke run() method on the object instance superman , it looks up for the property (method) on Superman.prototype object. As run() (property) method is NOT defined there, it continues the search on its immediate prototype object along the prototype chain ( Flash.prototype ). It then invokes run() method found on Flash.prototype object. The extends keyword in ES6 provides us a cleaner syntax for subclassing compared to the Function Constructor meta-programming style.

ELI5: The prototype delegation can be described as the technique by which on invocation of an object property, the object looks up for the property in its own body. If the property is defined on its own body, then it returns the value. And, if NOT found, then it would continue to look for the property on its immediate prototype object, which is referenced through __proto__ property. This process of searching through prototype chain would continue until the property is (first) found and if NOT found in the prototype chain objects, it would yield undefined .

From meta-programming perspective in JavaScript, we can consider extends keyword as an equivalent to Object.create() method.

Tool: UMLet (GNU Linux client)