First of all, this story is based on Stephen Curtis -33 Fundamentals Every Javascript Developer Should Know and you can read it here.
I thought it is a great concept to know although it is not a requirement. I decided to learn and explain these concepts one by one.
Index
1. Classes
2. Class declaration
3. Method
4. Inheritance
5. Overwriting
6. Conclusion
Classes
Classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JavaScript are built on prototypes but also have some syntax and semantics that are not shared with ES5 classalike semantics.
Class declaration
One way to define a class is using a class declaration. To define a class, we need to use class
keyword. Once we define a class, we can generate as many instances as we want by using new
keyword.
Let’s see the simple example below.
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}const rect1 = new Rectangle(100, 200);
const rect2 = new Rectangle(50, 100);console.log(rect1); // Rectangle {height: 100, width: 200}
console.log(rect2); // Rectangle {height: 50, width: 100}
First, we declare Rectangle class with class
keyword and it has a constructor
function that is only invoked when instances are made by using new
keyword.
Second, we made two instances, rect1
and rect2
. Since we made our instances using new
keyword, constructor
function is invoked. What constructor
function do here is to store height and width as a member variable. Therefore two instances are made that have different variable values.
Note that You need to declare class before calling it since, Unlike function declaration, class declaration is not hoisted.
Method
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
} logArea() {
console.log(`${this.height * this.width}`);
}
}const rect1 = new Rectangle(100, 200);
const rect2 = new Rectangle(50, 100);rect1.logArea(); //20000
rect2.logArea(); //5000
Class doesn’t only store member variables. It also can make methods!! When we define a function inside of the class, we don’t need to use function
keyword. Simply make function declaration without function
keyword.
Inheritance
class Shape {
constructor(width, height) {
this.width = width;
this.height = height;
} area() { console.log(‘calculating…’); return this.width * this.height;
}
}class Rectangle extends Shape {}const rect = new Rectangle(10, 10);
console.log(rect.area());// result
calculating...
100
By using extends
keyword, other class can inherit the parent class’s member variable and methods. In here, Rectangle
class inherits the Shape
class. Therefore we can use area
method in rect
object that is made by Rectangle
class.
Overwriting
class Shape {
constructor(width, height) {
this.width = width;
this.height = height;
} area() {
console.log('calculating...');
return this.width * this.height;
}
}class Triangle extends Shape {
area() {
return (this.width * this.height) / 2;
}
}const triangle = new Triangle(10, 10);console.log(triangle.area());// result
50
Sometimes, we need to change the method since the class that inherits the parent class has different characteristics. For example, as triangle’s area is half of the rectangle area, we need to divide width * height by 2.
In this case, we can simply overwrite the parent’s class method like above example.
super
class Shape {
constructor(width, height) {
this.width = width;
this.height = height;
}area() {
console.log('calculating...');
return this.width * this.height;
}
}class Triangle extends Shape {
area() {
super.area(); return (this.width * this.height) / 2;
}
}const triangle = new Triangle(10, 10);console.log(triangle.area()); // result
calculating...
50
What if we want to overwrite the parent class method partially? In that case, we can use super
keyword. super
keyword let us can access the parent class.
For example, In the above, I just added super.area()
inside of Triangle
class. What it does here is to call area
method that is in the Shape
class. And then, instead of return this.width * this.height, return this.width * this.height / 2 by overwriting it.
Conclusion
Today I explained simple keywords that are used in the JavaScript ES6 classes.
Although there are lots of more complicated concepts, this is gonna be great fundamentals when you study deeper.
Thanks for reading this story.
Reference : MDN