Classes vs Prototypes

Video

JavaScript Notes

JavaScript
    /**
     * Creating objects with Classes
     * Versus objects with prototypes
     * Since JavaScript is not a Class-based language
     * what is happening behind the class syntax?
     */
    
    let PersonC = class {
      constructor(nm, id) {
        this.name = nm;
        this.id = id;
      }
      getDetails() {
        return `${this.name} :: ${this.id}`;
      }
    };

    let bob = new PersonC("Bob", 123);
    console.log(bob.getDetails(), bob.name);
    
    let EmployeeC = class extends PersonC {
      // EmployeeC prototype links to PersonC prototype
      constructor(nm, id, salary) {
        super(nm, id);
        this.salary = salary;
      }
      employeeInfo() {
        //exist on the prototype of EmployeeC
        return `${this.name} :: ${this.id} :: ${this.salary}`;
      }
    };
    let noomi = new EmployeeC("Noomi", 456, 8500000);
    console.log(noomi.employeeInfo());
    
    ///////////////////////////////////////////////
    
    let PersonP = function(nm, id) {
      this.name = nm;
      this.id = id;
    };
    PersonP.prototype.getDetails = function() {
      return `${this.name} :: ${this.id}`;
    };

    let fred = new PersonP("Fred", 321);
    console.log(fred.getDetails(), fred.name);
    
    let EmployeeP = function(nm, id, salary) {
      PersonP.call(this, nm, id);
      this.salary = salary;
    };

    Object.setPrototypeOf(EmployeeP.prototype, PersonP.prototype); 
    // sets the prototype of EmployeeP to the new prototype, PersonP.prototype
    // allows you to get to the .getDetails method inside PersonP.prototype
    // NOTE: THIS LINE WAS CHANGED FROM THE VIDEO

    EmployeeP.prototype.employeeInfo = function() {
      return `${this.name} :: ${this.id} :: ${this.salary}`;
    };
    let mary = new EmployeeP("Mary", 654, 65000);
    console.log(mary.employeeInfo());