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 matias_perez
JavaScript 6
Classes and Closures
