Javascript - Class (ES6)

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > ECMAScript - Grammar Standard > Javascript - Object

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.

Advertising

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.
Advertising

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:

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.

Advertising

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

web/javascript/es/object/class.txt · Last modified: 2019/02/16 17:40 by gerardnico