EcmaScript6 OOP

Classical Inheritence

Object Oriented Programming

the basics

Why OOP?

  • Organize your code in meaningful ways
  • Easier to conceptualize how code relates
  • promotes DRY principle
    • through multiple instances
    • through inheritence
  • promotes encapsulation
    • through access modifiers  
    • by exposing a defined interface

Objects

  • holds state through properties (variables)
  • can perform actions through methods (functions)
  • can have constructor methods which are functions that are invoked when the object is instantiated
  • can have accessor methods that provide public access to private properties

Classes

Classes define the properties and methods that it's instances have.

Classes are not to be treated like objects, instead think of them like blueprints for how objects are structured and behave.

Objects

Are the instances of classes.

All objects constructed from a class share the same properties and methods, while individual object property values may differ.

Classes

defining

  • have a name
  • can extend another class
  • can define a constructor method
  • can define properties
  • can define methods
  • can define accessor methods
    • getters and setters

Classes

have a name

class Rocket {
  
}

Classes

can define a constructor method

class Rocket {
  constructor(model, destination) {
    
  }
}

Classes

can define properties

fuel is a public properties

_launchCount, _model and _destination are private

class Rocket {
  constructor(model, destination) {
    this._model = model;
    this._destination = destination;
  }
}

Classes

can define accessor methods
(getters and setters) to access private properties

class Rocket {
  constructor(model, destination) {
    this._model = model;
    this._destination = destination;
  }

  get model() {
    return `Rocket Model: ${this._model}`;
  }

  set model(model) {
    if (typeof(model) === 'string') {
      this._model = model;
    }
    else {
      throw new TypeError('Rocket.model must be a string');
    }
  }
}

Classes

can define accessor methods
(getters and setters) to access private properties

class Rocket {
  constructor(model, destination) {
    this._model = model;
    this._destination = destination;
    this._launchCount = 0;
  }

  get launchCount() {
    return this._launchCount;
  }

  set launchCount(launchCount) {
    if(typeof(launchCount) === 'number') {
      this._launchCount = launchCount;
    }
    else{
      throw new TypeError('Rocket.launchCount must be a number');
    }
  }
}

Classes

can define methods

class Rocket {
  constructor(model, destination) {
    this._model = model;
    this._destination = destination;
    this._launchCount = 0;
  }

  launch() {
    this._launchCount++;
    console.log('to the moon');
  }
}

Class Inheritence

  • extend superclass properties and methods
  • defines it's own constructor method
    • must invoke it's superclass constructor
      before using the `this` keyword
  • can override inherited methods

Define a Superclass

class Vehicle {
  constructor(destination) {
    this._destination = destination;
  }
  
  get destination() {
    return this._destination;
  }

  set destination(destination) {
    if(typeof(destination) === 'string') {
      this._destination = destination;
    }
    else{
      throw new TypeError('Vehicle.destination must be a string');
    }
  }
}

Extend the Superclass

class Rocket extends Vehicle {
  constructor(model, destination) {
    super(destination);
    this._model = model;
  }
}

// Vehicle is not defined

Import the Superclass definition

import Vehicle from './Vehicle';

class Rocket extends Vehicle {
  constructor(model, destination) {
    super(destination);
    this._model = model;
  }
}

Creating Objects

Instances of Classes

  • use the new keyword to create an instance

  • the constructor method is invoked on creation

    • constructor arguments can be passed in

new Rocket('Raccoon', 'The Moon');

  • Classes cannot be invoked like normal functions

Rocket('Raccoon', 'The Moon');
// Cannot call a class as a function

Instance Properties

  • assign the instance to a variable

  • use dot notation or bracket notation to access properties

const raccoon = new Rocket('Raccoon', 'The Moon');
raccoon.fuel;
raccoon['fuel'];

Accessor Methods

  • access properties through getter and setter methods as if they normal are properties

const raccoon = new Rocket('Raccoon', 'The Moon');
raccoon.model; // 'Rocket Type: Raccoon'
raccoon.model = 'Lunar Raccoon';
raccoon['model']; // 'Rocket Type: Lunar Raccoon'
raccoon['model'] = 404; // Rocket.model must be a string

  • assigning a new property to an object will implicitly invoke it's set accessor method 

Instance Methods

  • invoke instance methods normally

  • use dot notation or bracket notation

const raccoon = new Rocket('Raccoon', 'The Moon');
raccoon.launch(); // 'to the moon'
raccoon['launch'](); // 'to the moon'

Inherited properties and methods

from the superclass

const raccoon = new Rocket('Raccoon','The Moon');
raccoon.destination; // The Moon
raccoon.destination = 404; // Vehicle.destination must be a string

Checking Instance Type

  • use instanceof

const raccoon = new Rocket('Raccoon', 'The Moon');
raccoon instanceof (Rocket)   // true
raccoon instanceof Rocket     // true
raccoon instanceof (Vehicle)  // true
raccoon instanceof Vehicle    // true

OOP in ES6

By DevLeague Coding Bootcamp

Source: Jon Borgonia

OOP in ES6

ES6 OOP

  • 1,577

More from DevLeague Coding Bootcamp