Javascript - Class (ES6)

1 - About

Class in Javascript.

Class was introduced in ECMAScript 2015. Before the module pattern was used to create a class like behavior.

Class provide a simpler way to create objects and deal with inheritance than JavaScript's existing prototype-based inheritance.

The class syntax is not introducing a new object-oriented inheritance model to JavaScript.

Classes are functions.

3 - Syntax

The class syntax has two ways to define a class:

  • class declarations.
  • a class expressions

Because a class is just a syntax sugar above function syntax, you can see that this syntax's map with:

  • function declarations
  • function expressions
The order of your code is important. You first need to declare your class and then access it.
This is not the case with function declaration.

Syntax:

  • The body of a class is the part that is in curly brackets {}.
  • There can only be one special method with the name “constructor”
  • The static keyword defines a static method for a class.
  • The extends keyword is used in class declarations or class expressions to create a class as a child of another class. As a class is just a function, a function prototyped may also be extended.

3.1 - Declaration


class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

3.2 - Expression

  • unnamed

var Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

  • named. The name given to a named class expression is local to the class's body.

var Rectangle = class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

4 - Example

4.1 - Static function


class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.sqrt(dx*dx + dy*dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2));

where:

  • JavaScript - new

4.2 - Class vs Function Syntax (and this)


class Animal { 

  speak() {
    return this;
  }
  
  static eat() {
    return this;
  }
  
}

let obj = new Animal();
let speak = obj.speak;
speak(); // undefined

let eat = Animal.eat;
eat(); // undefined

Autoboxing will not happen for a class syntax.


function Animal() { }

Animal.prototype.speak = function() {
  return this;
}

Animal.eat = function() {
  return this;
}



let obj = new Animal();
let speak = obj.speak;
speak(); // global object

let eat = Animal.eat;
eat(); // global object

Autoboxing will happen for a prototype syntax.
Based on the this value for which the function was called.

4.3 - Extend


class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

var d = new Dog('Mitzie');
d.speak();

5 - Management

5.1 - setPrototypeOf

As a class is also a function, you can set a prototype to a class.


var Animal = {
  speak() {
    console.log(this.name + ' makes a noise.');
  }
};

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

// If you do not do this you will get a TypeError when you invoke speak
Object.setPrototypeOf(Dog.prototype, Animal);

var d = new Dog('Mitzie');
d.speak(); //Mitzie makes a noise.

5.2 - instanceof

Javascript - instanceof


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

var myCat = new Cat("Poesie");
console.log(myCat instanceof Cat); // true

5.3 - this

In JavaScript, class methods are not bound by default. If you forget to bind a method and pass it, this will be undefined when the function is actually called.

It is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, you should bind that method.

5.4 - Get the objects of a class

6 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap