JavaScript Six

Classes and Closures

What is a Class?

Classes can be seen as syntactical sugar for constructor functions.

 

Classes are a newer way to create blueprints for creating objects.

class Car {
    
}

const myCar = new Car();

To create a class, we use the class keyword, and give the class a name (first letter capitalized).

 

To create new objects based on the class, use the new keyword.

Constructors in Classes

To build an object blueprint we use the constructor keyword.

 

The constructor function sits inside of the class.

class Car {
    constructor(make, model, year){
        this.make = make;
        this.model = model;
        this.year = year;
    }
}

const myCar = new Car('Tesla', 'Model X', 2020);

Parameters

Passing in Arguments

Object structure

Prototypes in Classes

Prototype methods can be added directly into the class. To create a prototype method, place it underneath the constructor function.

class Car {
    constructor(make, model, year){
        this.make = make;
        this.model = model;
        this.year = year;
    }
    
    honk(){
        alert(`Your ${this.make} honked!`);
    }
}

Prototype methods in classes don't use the function keyword. They are also not rewritten onto each new object, but each new object inherits them.

Extending Classes

Classes are able to extend from other classes, to inherit their properties and methods.

 

To do this, we use the extends keyword.

class Animal {
  constructor(name, type){
      this.name = name;
      this.type = type;
  }
  talk(saying){
    console.log(`${this.name} says: ${saying}`)
  }
}

class Fish extends Animal {
  
};

Extends from the Animal Class

Extending Classes

When extending from another class, the keyword super can be used to invoke the parent class' constructor function.

class Animal {
  constructor(name, type){
      this.name = name;
      this.type = type;
  }

  talk(saying){
    console.log(`${this.name} says: ${saying}`)
  }
}

class Fish extends Animal {
    constructor(name){
        super(name, 'Fish');
    }
};

Closure Functions

A closure is an inner function that has been returned from an outer function, that also relies on the outer functions scope. 

Closure Functions

  function counter(){
    let count = 0;

    function addOne(){
      return count += 1;
    };

    return addOne;
  };

Closure Function

Relies on lexically scoped variable

Lexically scoped variable

Returning the function

Using Closure Functions

  function counter(){
    let count = 0;

    function addOne(){
      return count += 1;
    };

    return addOne;
  };
  
  const countOne = counter();

To create a closure, save the outer function invoked to a new variable.

 

The following example will return the value returned from addOne to the variable.

Note that you can create as many variables based off of this function as you need!

Module Pattern

function modulePattern() {
  let privateVariable = 'I am private';
  
  let privateFunction = function() {
    console.log(privateVariable)
  }
  
  return {
    changeVar: function(str) {
      privateVariable = str;
    },
    readVar: function() {
      privateFunction();
    }
  }
}

The module pattern refers to creating "private" variables and functions, and then returning functions that are able to access those private values.

JavaScript 6

By Matthew Bodily

Source: matias_perez

JavaScript 6

Classes and Closures

  • 307

More from Matthew Bodily