Classes are the well-known concept in object oriented programming. Programmer those working on C++, Java etc are aware of what is Class and what we can achieve using Classes.With ECMAScript 2015 version JavaScript also introduced Classes.
According to MDN -
"JavaScript classes introduced in ECMAScript 2015 are syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance."
let's go bit deeper and learn how Classes works in JavaScript.
Class declarations: Use the class keyword and give class name.
According to MDN -
"JavaScript classes introduced in ECMAScript 2015 are syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance."
let's go bit deeper and learn how Classes works in JavaScript.
- JavaScript classes introduced in ECMAScript 2015.
- To declare a class, you use the class keyword with the name of the class.
- JavaScript does not have classes, the way that Java and other languages have classes.
- JavaScript's class is (mostly) just syntactical sugar for prototypes, which are very different from traditional classes.
- A distinctive feature of classes is the function called the constructor. This is where you initialize your object's properties.
- You don't have to define a constructor function. If you choose not to, the engine will insert an empty one for you.
- In JavaScript, there is two way to define the class.
Class declarations: Use the class keyword and give class name.
class Rectangle{
constructor(height, width) {
this.height = height;
this.width = width;
}
}
Class expressions: class expression can be named or unnamed in JavaScript.
// unnamed
var Rectangle = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
// named
var Rectangle = class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
An important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not.
//Example
var p = new Rectangle(); // ReferenceError
class Rectangle {}
The constructor method is a special method for creating and initializing an object created with a class. A constructor can use the super keyword to call the constructor of a parent class.
Prototype methods:
Here is the example to create prototype method in JavaScript
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
get area() {
return this.calcArea();
}
calcArea() {
return this.height * this.width;
}
}
const square = new Rectangle(10, 10);
console.log(square.area);
Static methods:
- The static keyword defines a static method for a class.
- Static methods are called without instantiating their class and cannot be called through a class instance.
- Static methods are often used to create utility functions for an application.Below is the example to create static method in JavaScript.
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));
ES6 is finalized, but not fully supported by all browsers (e.g., ES6 Firefox support). To use ES6 today, get a compiler like Babel.For more information and examples on ES6 classes, take a look at this link MDN:CLASSES.
Happy Learning :-)
