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(with a capital first letter). To create new objects based on the class, use the 'new' keyword.

Constructors in Classes

To build an object blueprint, like you would with a constructor function, 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, 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' can be used to invoke the parent classes 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 function is an inner function that has been returned from an outer function but relies on the outer functions scope. 

You right now -->

Let's see an example

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 use the closure function, save the outer function, invoked, to a new variable. This 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 Six

By Matthew Bodily

Made with Slides.com

JavaScript Six

  • 193

More from Matthew Bodily