ES6 Classes

Objectives

  • Explain the difference between function constructors and ES6 classes
  • Use super to refer to the subclass's parent class
  • List the different types of methods a class can have and explain the difference between them

Under the hood, ES6 classes are not something that is radically new: They mainly provide more convenient syntax to create old-school constructor functions.

 - Axel Rauschmayer

var Dog = function(name){
    this.name = name;
}

Dog.prototype.call = function(){
    return "Come here " + this.name;
}

Dog.prototype.bark = function(){
    return "Bow wow";
}

// ES5 way

var myDog = new Dog('Twiggy');
myDog.bark() // 'Bow wow'
class Dog {

    constructor(name){
        this.name = name;
    }

    call(){
        return "Come here " + this.name;
    }

    bark(){
        return "Bow wow"
    }

}

// ES6 way

var myDog = new Dog('Twiggy');
myDog.bark() // 'Bow wow'
class Dog {

    public Dog(String name){
        this.name = name;
    }

    public static String call(){
        return 'Come here ' + this.name;
    }

    public static String bark(){
        return 'Bow wow';
    }

}

//  Java

Base Classes

Class Expression vs Class Declaration




  •  
  • Analogous to that of anonymous and named function expressions, with one exception:
  • Class declarations are not hoisted (function declarations are)
// Class expression
class Food {}

// Class declaration
var Food = {}
// OR
var Food = goodFood{}

Derived Classes



class Dog extends Animal {
    // class body
}

A derived class can't contain an empty constructor.

 It can, however, contain no constructor.

You must call `super` in the constructor of a derived class before you use `this`.

Methods

Constructors

  • It's the only method of a class from which you can make a superconstructor call
  • It handles all the dirty work of setting up the prototype chain properly
  • It acts as the definition of the class.

Constructors

  • Can't be called without `new` keyword




     
  • Cool trick to use (new.target):
class Car{
    
    constructor(make, model){
        this.make = make;
        this.model = model;
    }
}

var ford = Car('Ford', 'Elantra'); // undefined
class Car{
    
    constructor(make, model){
        if(!new.target) return new Car(make, model);
        this.make = make;
        this.model = model;
    }
}

var ford = Car('Ford', 'Elantra'); // we good!

Static

Methods on the constructor function itself, which are not available on instances of the class.

Prototype

Any method that isn't a constructor or a static method

 

The name comes from the fact that we used to achieve this functionality by attaching functions to the .prototype of functions-as-constructors

In-depth reading:

http://exploringjs.com/es6/ch_classes.html

ES6 Classes

By Dize Hacioglu

Made with Slides.com

ES6 Classes

  • 259

More from Dize Hacioglu