Classes
-
Introduction
- Classes on ES5 and ES6 will have the normal content, being that superclasses, subclasses and all that comes with it.
-
Exmaples
-
Classes
Here we're going to have the constructor, one prototype and set an object for it.
ES5
var Employee5 = function(name, yearOfBirth, job) {
this.name = name;
this.yearOfBirth = yearOfBirth;
this.job = job;
}
Employee5.prototype.calculateAge = function() {
var age = new Date().getFullYear() - this.yearOfBirth;
this.age = age;
}
var jessica5 = new Employee5('Jessica', 1969, 'Laywer');
console.log(jessica5); Jessica, 1969, Laywer
jessica5.calculateAge(); Adds the age to the object Jessica
console.log(jessica5); Jessica, 1969, Laywer, 50
ES6
class Employee6 { this is a class declaration
constructor (name, yearOfBirth, job) { every class declaration has a constructor
this.name = name;
this.yearOfBirth = yearOfBirth;
this.job = job;
}
calculateAge() { prototype is defined whithin the class
var age = new Date().getFullYear() - this.yearOfBirth;
this.age = age;
}
static greeting() { Static: methods that are attached to the class, not inherited by it's instances, so they are not accessible through the object.
this.addSomething = 'addSomething';
console.log('Employee6, has access!');
}
}
const jessica6 = new Employee6('Jessica', 1969, 'Laywer');
Employee6.greeting(); Works, prints 'Employee6, has access!'
console.log(jessica6); Jessica, 1969, Lawyer
jessica6.calculateAge();
jconsole.log(jessica6); Jessica, 1969, Lawyer, 50
jessica6.greeting(); Will return an error, being that it isn't inherited by the classes as a prototype would, so it doesn't have access to it
-
Classes with Inheritance
var Employee5 = function(name, yearOfBirth, job) { Superclass, constructor
this.name = name;
this.yearOfBirth = yearOfBirth;
this.job = job;
}
Employee5.prototype.calculateAge = function() {
var age = new Date().getFullYear() - this.yearOfBirth;
this.age = age;
}
var Laywer5 = function(name, yearOfBirth, job, cases) { subclass of Employee5
Employee5.call(this, name, yearOfBirth, job);
this.cases = cases;
}
Laywer5.prototype = Object.create(Employee5.prototype); Uses object.create to manually set an object's prototype, in this case connecting the prototype chain of Laywer5 with Employee5 (where Laywer5 will have all the prototypes of Employee5)
Laywer5.prototype.gotCase = function() {
this.cases++;
}
var jessicaLaywer5 = new Laywer5('Jessica', 1969, 'Laywer', 0); 0 is the first value for cases
jessicaLaywer5.calculateAge(); prototype inherited from Employee5
console.log(jessicaLaywer5); Jessica, 1969, Laywer, 0
jessicaLaywer5.gotCase(); cases++
console.log(jessicaLaywer5); Jessica, 1969, Laywer, 1
class Employee6 {
constructor (name, yearOfBirth, job) {
this.name = name;
this.yearOfBirth = yearOfBirth;
this.job = job;
}
calculateAge() {
var age = new Date().getFullYear() - this.yearOfBirth;
this.age = age;
}
}
class Laywer6 extends Employee6 {
constructor(name, yearOfBirth, job, cases) {
super(name, yearOfBirth, job);
this.cases = cases;
}
gotCase() {
this.cases++;
}
}
const jessicaLaywer6 = new Laywer6('Jessica', 1969, 'Lawyer', 0);
jessicaLaywer6.gotCase(); case was 0, now it's 1
jessicaLaywer6.calculateAge(); calculates age
console.log(jessicaLaywer6); Jessica, 1969, Lawyer, 1
class Laywer6 extends Employee6 { The Laywer6 subclass extends the Employee6 superclass
constructor(name, yearOfBirth, job, cases, wonCases) { All classes must have this constructor, and we have to repeat the properties we want on the Laywer6 subclass
super(name, yearOfBirth, job); On ES5 we use the .call method to call the superclass, here we only say super and it calls the superclass
this.olympicGames = olympicGames; Organiza
this.medals = medals;
}
}
} Closes the class declaration
const john6 = new Person6('John', 1990, 'teacher');
Person6.greeting();
Importante!!
a) This class definition is, behind the scenes, a function definition, and so it's also an object and that's why we can attach methods to it.
b) Class definitions are not hoisted, unlike function constructors, we need to first implement a class and only later in our code we can start using it.
c) We can only add methods to classes, but not properties. That is not a problem, because inheriting properties through the object instances is not the best practice anyway.