Es5 create classes
function Plane(numEngines) {
this.numEngines = numEngines;
this.enginesActive = false;
}
// methods "inherited" by all instances
Plane.prototype.startEngines = function () {
console.log("starting engines...");
this.enginesActive = true;
};
const richardsPlane = new Plane(1);
richardsPlane.startEngines();
const jamesPlane = new Plane(4);
jamesPlane.startEngines();
Copy the code
Es6 create classes
Class Plane{
constructor(numEngines){
this.numEngines = numEngines;
}
startEngines(){
console.log("starting engines...");
this.enginesActive = true; }}const richardsPlane = new Plane(1);
richardsPlane.startEngines();
const jamesPlane = new Plane(4);
jamesPlane.startEngines();
Copy the code
Super and extends in ES5
function Tree(size,leaves){
this.size = size || 10;
this.leaves = leaves || {spring: 'green'.summer: 'green'.fall: 'orange'.winter: null};
this.leftColor ;
}
Tree.prototype.changeSeason = function(season){
this.leftColor = this.leaves[season];
if(season === 'spring') {this.size += 1}}function Map(syrupQty,size,leaves){
Tree.call(this,size,leaves);
this.syrupQty = syrupQty || 15;
}
Map.prototype=Object.create(Tree.prototype);
Map.prototype.constructor = Map;
Map.prototype.changeSeason = function(season){
Tree.prototype.changeSeason.call(this,season);
if(season === 'spring') {this.syrupQty += 1; }}Map.prototype.gatherSyrup = function(){
this.syrupQty -=3;
}
const myMap = new Map(15.5);
myMap.changeSeason('fall');
myMap.gatherSyrup();
myMap.changeSeason('spring');
Copy the code
Super and extends in ES6
Class Tree{
constructor(size=10,leaves={spring: 'green', summer: 'green', fall: 'orange', winter: null}){
this.size = size;
this.leaves = leaves;
this.leftColor = null;
}
changeSeason(season){
this.leftColor = this.leaves[season];
if(season === 'spring') {this.size += 1;
}
}
}
Class Map extends Tree{
constructor(syrupQty=15,size,leaves){
super(size,leaves)//super is treated as a function
this.syrupQty = syrupQty;
}
changeSeason(season){
super.changeSeason(season);//super is treated as an object
if(season === 'spring') {this.syrupQty += 1; }}gatherSyrup(){
this.syrupQty -= 3; }}Copy the code
The above can be interpreted as follows:
extends
The Map’s prototype keyword points to the Tree’s prototype and to the Map’s prototypeconstructor
Point to their ownsuper
Class Tree, there are two ways to use it, the first is a function, and the second is an object.