es6 classes, prototypical inheritance, static keyword

class_and_static_keyword.js

class Food {
    static isHealthy() {
        return true
    }
    static isEdible() { // references it's own class
        return this.isHealthy()
    }
}

console.log(Food.isEdible())

class Vehicle {
    isLegal() {
        return true
    }
}

class Car extends Vehicle {
    canUse() {
        return this.isLegal()
    }
}

console.log(new Car.canUse()); // returns true
console.log(Vehicle.prototype.isLegal()) // invoke property on prototype

class Person {
    constructor(id) {
        // shadowing of the id() method 
        // with a property value on the instance
        this.id = id;
    }
    
    id () {
        
    }
}

const abigail = new Person('cc');
abigail.id(); // shadowing of the id() method with a property value on the instance we talked about above

ES6 Classes

Overview

• the class keyword operates on the [[prototype]] (delegation) mechanism; therefore, is just syntactic sugar over the function. All objects declared with a class keyword will have a prototype object.
• using extends - the prototype object, and not the class itself, is prototype linked to another class’s prototype object.

Pseudo-Inheritance, still prototype-linked

In our example, Car is prototype linked to Vehicle's prototype using the extends keyword.

• extends gives the appearance of a classical parent-child relationship, however, instead of properties being copied from one class to another, methods and properties are actually created on the prototype object of that class.

To demonstrate, we can invoke isLegal() on the prototype object -> console.log(Vehicle.prototype.isLegal().

Classes, in further detail

To explain ES6 class behavior further, let's discuss why the code console.log(new Car.canUse()) returns true. This is because the this keyword is referencing the newly created object we get from using the new keyword on our Car class. This newly created object is prototype linked to the Vehicle's prototype object through extends.

• We have access to the methods (otherwise known as functions or properties) that exist on another class. The method exists on the prototype object, and not on the class itself
  Again, if looking to access a method (property) on the class, we must note that the method doesn’t exist on the class, the method is written to the prototype object of the class.

Static keyword

To assign the method (property) to the class - we use the static keyword.
The static keyword will assign it to the class instead of the prototype of the class

Static properties can be called in its own class, and we can use the ’this’ keyword, because the static property is referencing it’s own class

Shadowing

see above

Gotchas

For an alternative: see https://github.com/getify/You-Dont-Know-JS/blob/f0d591b6502c080b92e18fc470432af8144db610/this%20%26%20object%20prototypes/ch6.md#nicer-syntax