This article is about Class in Javascript.
Class was introduced in ECMAScript 2015. Before the module pattern was used to create a class-like behavior.
Classes 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.
The class syntax has two ways to define a class:
Because a class is just a syntax sugar above function syntax, you can see that this syntax's map with:
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:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
var Rectangle = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
var Rectangle = class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
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 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.
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();
Example:
function(clazzArgument: new (argConstructor: string) => Class) {
const object:Class = new clazzArgument("1");
}
Javascript does not have the notion of class name but prototype. There is multiples way to determine the class that are shown below.
function Foo() {}
var foo = new Foo();
console.log("The type of the function/class is: "+(typeof Foo)); // == "function"
console.log("The type of the instance is: "+(typeof foo)); // == "object"
console.log("foo instance of Foo ?: "+(foo instanceof Foo)); // == true
console.log("Foo prototype of foo ?: "+(Foo.prototype.isPrototypeOf(foo))); // == true
console.log("The constructor name is: "+foo.constructor.name); // == "Foo"
console.log("The name of the function is: "+Foo.name); // == "Foo"
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.
class Cat {
constructor(name) {
this.name = name;
}
}
var myCat = new Cat("Poesie");
console.log(myCat instanceof Cat); // true
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.