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:

  • extendsThe Map’s prototype keyword points to the Tree’s prototype and to the Map’s prototypeconstructorPoint to their own
  • superClass Tree, there are two ways to use it, the first is a function, and the second is an object.