Class 12 ‐ Classes and DOM Binders - lenincompres/ima-front-end-web GitHub Wiki

Part1

More on Classes

// Declare a class typically with a capitalize name. 
// They may extend a previous classs, inheriting their properties.

class ClassName extends AnotherClass(){

  // The constructor creates an object (or instantiates the class)
  constructor(prop1 = "default1", prop2 = [], ...){

     // If the class extends another, you may call the super() method 
     // This evoke the original constructor method
     super(prop1);
     
     // Use *this* to refer to the object create and access or set up props and methods
     this.prop1 = prop1;
     for(let p2 pf prop2){
       this.someMethod(p2));
     }
  }

  // classes may have methods declared after the contructor
  someMethod(prop){
    ...
  }

  // classes may also have setters and getters for properties
  set aVariable(value){
    console.log(`This aVariable has been set to:${value}`);
    this.someOtherMethod();
    this._aVariable = this.aVariable;
  }

  get aVariable(){
    console.log('This aVariable has been retrieved');
    this.someOtherMethod();
    return this._aVariable;
  }

  // Classes can only have static methods and constants.
  // Theres do not belong to the instantiated object but to the class
  static A_CONSTANT = "Some value that doesn't change";

  static aStaticMethod(){
     console.log(ClassName.A_CONSTANT);
     ...
     /// static methods can only access static props of the class, not props of an instance
  }

}

// This is how you instatiate (or create an object of the class)
let myObject = new ClassName(val1, val2);

Here is the live sample we make in class: Generic Food App

Part 2

DOM Binders

Assignments

  • Work on your logs
  • Work on you finals
  • Get office hours with Lenin or Ruby