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