2.3-Classes and inheritance.md

2.4-Classes and inheritance: class, extends, setters, getters, super, etc ecma-international.org

JS doesn't have classes, it does something that’s called prototypes JS will still have prototypes ES6 add syntactic sugar code on top of this.

ES6 Classes are simple sugar over the prototype-based OO Pattern: Instead worrying about writing prototypes we are going to be writing sugar Classes in ES6.

ES5 and ES6 Classes

In ES5 when we want to simulate a Class we used the prototype to simulate it.

// ES5 way
var Foo = function( name ) {
   this.name  = name;
};

Foo.prototype.getName = function () { // prototype chain
   return this.name ;
};

Foo.prototype.setName  =  function ( name ) { // prototype chain
   this.name  = name;
};

var Foo2 = new Foo( "Leo" );
Foo2.setName('Leo'); 
console.log( Foo2.getName() ); // Leo

// ES6 way
class Noo {
   constructor ( name ) {
     this.name = name;
  }
  getName () {
     return this.name ;
  }
  setName ( name ) {
     this.name = name;
  }
}

var Noo2 =  new Noo("Leo2");
Noo2.setName('Leo2');
console.log(Noo2.getName());

Classes ES5 and ES6

classes, constructor, getters, and setters

class Foo {
  constructor(p1, p2) {
    this.p1 = p1;
    this.p2 = p2;
  }

  get name() {
    return this.p1 + " " + this.p2;
  }

  set name(name) {
    var names = name.split(" ");

    this.p1 = names[0];
    this.p2 = names[1];
  }
}

var hello = new Foo("Hello", "World!");
hello.world = "Hello World!";
console.log(hello.world);

ES6 Classes and Contructor

extends

class Car {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(${this.x}, ${this.y})';
    }
    static classMethod() {
        return 'test';
    }
}

// Point: Car class and Fiat: subclass
class Fiat extends Car {
    constructor(x, y, color) {
        super(x, y);
        this.color = color;
    }
    toString() {
        return super.toString() + ' in ' + this.color;
    }
}

console.log(typeof Car); // function :)
let cp = new Fiat(10, 5, 'red'); // we can only invoke a class via new
console.warn(cp); // function Fiat {x: 25, y: 8, color: "red"}
console.log(cp instanceof Fiat); // true
console.log(cp instanceof Car); // true

// The prototype of a subclass is the superclass
console.log( Object.getPrototypeOf( Car) ); // Car
console.log( Object.getPrototypeOf( Fiat ).toString() ); //  means thats methods and properties are inherited function Car(x, y) {…}

console.log( Fiat.classMethod() );

ES6 Inheritance

Classes

function Car() {
    
  var that = this; //locally assign this that can be closed over
    
  that.speed = 0;

  setInterval(function goFaster() {
    //this has a different scope, but we can use the self variable to reference the parent "this"
    that.speed += 5;
      console.log('now going: ' + that.speed);
  }, 2000);
    
}

var car = new Car();
console.warn(car)

ES5 Vs. ES6: ES5 version Vs.

function Car() { //Note, we could use the new Class feature in ES6 instead

  this.speed = 0;

  setInterval(() => {
    this.speed += 5; //this is from Car
    console.log('now going: ' + this.speed);
  }, 1000);

}

let car = new Car();
console.log(car)

Ej3: ES5 Vs. ES6: ES6 version

⬆ back to top