Javascript - Class (ES6)

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 but is a syntax sugar above prototype

Classes are functions.

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.

Declaration

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

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;
  }
};

Example

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:

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.

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();

Management

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.

instanceof

Javascript - instanceof

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

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

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.

Get the objects of a class

Documentation / Reference


Powered by ComboStrap