ES6 Classes

Pankaj Pralhad Parkar

(Software Engineer @TSS Consultancy)

Twitter: @pankajparkar

FB: fb.com/pankaj.parkar

LinkedIn: https://in.linkedin.com/in/pankajparkar

Email: parkarpankaj3@gmail.com

About me

Object

  • Everything is an Object in Javascript. 
  • It is base of any derived object.
var fooArray = [1,2,3];
console.log(fooArray.join(",")); 
//Output
"1,2,3"

console.dir(fooArray);

Constructor & Prototype

  • Constructor is a special method to creating & initialising object created in a class.
  • Prototype is property belongs to prototype object of function. (It same as that of `__proto__` in console).
function Foo(){
    this.name = 'Pankaj';
}

console.log(Foo.prototype);
console.log(Foo.prototype.constructor == Foo);

//Output
{ __proto__: { constructor: Foo, __proto__: Object }}
true

Class

E6 Class keyword is just a syntactical sugar to define a function & create a prototypal inheritance in simpler way.

Class

class Vehicle {
    constructor(name){
        this.name = name;
        console.log('Simple Class');
    }
}

var vehicle = new Vehicle('Car');
//Output
console.log(vehicle);
function Vehicle(name){
    this.name = name;
    console.log('Simple Class');
};

var vehicle = new Vehicle('Car');
//Output
console.log(vehicle);

ES5

ES6

Class can have..

class Human {
    constructor(){
        this._name = 'Test';
    }

    myMethod(){
        console.log('My method got call');
    }

    static myStaticMethod(){
        //here you don't have to this.
        console.log(`_name prop value is
                    ${this._name}`);
    }

    get name(){
        return this._name;
    }
    set name(value){
        this._value;
    }
}
//Static property
Human.somethingElse = 10;
  • Property
  • Method
  • static Method
  • Static Property
  • getter/setter

Inheritance

Vehicle

Car

Bicycle

How Prototypal inheritance have been used by ES5?

// define the Person Class
function Vehicle(name, color) {
    this.name = name;
    this.color = color;
}

Vehicle.prototype.description = function() {  
    return `Vehicle is ${this.name} 
        which has ${this.color} color.`;
};  

// define the Student class
function Car(name, color) {  
    Vehicle.call(this, name, color);
}  

// inherit Person
Car.prototype = 
   Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

var car = new Car('BMW', 'green');
console.dir(car)
console.log(car.description());

Inheritance using Class

class Vehicle{
   constructor(name, color){
		this.name = name;
        this.color = color;
   }
   description() {  
       return `Vehicle is ${this.name} 
            which has ${this.color} color.`;
   };
}

class Car extends Vehicle {
   constructor(name, color, wheels){
      super(name, color);
      this.wheels = wheels;
   }
}

var car = new Car('BMW', 'Green', 4);
console.log(car.description());

ES5 => ES6

class Vehicle{
   constructor(name, color){
		this.name = name;
        this.color = color;
   }
   description() {  
       return `Vehicle is ${this.name} 
         which has ${this.color} color.`;
   };
}

class Car extends Vehicle {
   constructor(name, color, wheels){
      super(name, color);
      this.wheels = wheels;
   }
}

var car = new Car('BMW', 'Green', 4);
console.log(car.description());
// define the Person Class
function Vehicle(name, color) {
    this.name = name;
    this.color = color;
}

Vehicle.prototype.description = function() {  
    return 'Vehicle is ' + this.name +
     'which has '+ this.color + ' color.';
};  

// define the Student class
function Car(name, color) {  
    Vehicle.call(this, name, color);
}  

// inherit Person
Car.prototype = 
   Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

var car = new Car('BMW', 'green');
console.log(car.description());

Thanks.

Questions??

ES6 Classes

By Pankaj Parkar

ES6 Classes

  • 793