JavaScript is a prototype-oriented, not an object-oriented programming language. So JavaScript doesn’t have an abstract class concept.
If you would like a class that cannot be constructed, but whose subclasses can, then you can use new.target:
By definition from another programming language: An abstract class is a class that is declared abstract —it may or may not include abstract methods. Abstract classes can’t be instantiated, but they can be subclassed.
JavaScript abstract class
Simple example code.
<!DOCTYPE html>
<html>
<body>
<script>
class Abstract {
constructor() {
console.log("Abstract")
if (new.target === Abstract) {
throw new TypeError("Cannot construct Abstract instances directly");
}
}
}
class Derived extends Abstract {
constructor() {
super();
console.log("Derived")
// more Derived-specific stuff here, maybe
}
}
const b = new Derived(); // new.target is Derived, so no error
const a = new Abstract(); // new.target is Abstract, so it throws
</script>
</body>
</html>Output:
If you’re specifically looking to require certain methods to be implemented, you can check that in the superclass constructor as well:
class Abstract {
constructor() {
if (this.method === undefined) {
// or maybe test typeof this.method === "function"
throw new TypeError("Must override method");
}
}
}
class Derived1 extends Abstract {}
class Derived2 extends Abstract {
method() {}
}
const a = new Abstract(); // this.method is undefined; error
const b = new Derived1(); // this.method is undefined; error
const c = new Derived2(); // this.method is Derived2.prototype.method; no errorSource: stackoverflow.com/
Let’s see another example below where we implement a class in JavaScript along with abstraction properties.
<!DOCTYPE html>
<html>
<body>
<script>
class Employee
{
constructor() {
if(this.constructor == Employee){
throw new Error(" Object of Abstract Class cannot be created");
}
}
display(){
throw new Error("Abstract Method has no implementation");
}
}
class Manager extends Employee
{
display(){
//super.display();
console.log("I am a Manager");
}
}
//var emp = new Employee;
var mang=new Manager();
mang.display();
</script>
</body>
</html>Output: I am a Manager
Here’s a simple example of how you can create an abstract class in JavaScript:
function AbstractClass() {
if (this.constructor === AbstractClass) {
throw new Error("Cannot instantiate abstract class");
}
}
AbstractClass.prototype.abstractMethod = function () {
throw new Error("Abstract method not implemented");
};
function ConcreteClass() {
AbstractClass.call(this);
// Additional initialization for ConcreteClass
}
// Inherit from AbstractClass
ConcreteClass.prototype = Object.create(AbstractClass.prototype);
ConcreteClass.prototype.constructor = ConcreteClass;
// Implement the abstract method
ConcreteClass.prototype.abstractMethod = function () {
// Implementation for the abstract method in ConcreteClass
console.log("Abstract method implemented in ConcreteClass");
};
// Usage
// Attempting to instantiate AbstractClass will throw an error
// var abstractInstance = new AbstractClass(); // Throws an error
// Instantiate ConcreteClass
var concreteInstance = new ConcreteClass();
// Call the abstract method on the concrete instance
concreteInstance.abstractMethod(); // Outputs: "Abstract method implemented in ConcreteClass"
In this example:
- The
AbstractClassfunction serves as a constructor for the abstract class. It checks if an attempt is made to instantiate it directly and throws an error if so. - The
abstractMethodfunction is added to the prototype ofAbstractClass. It throws an error, indicating that the method is abstract and needs to be implemented by subclasses. - The
ConcreteClassconstructor calls theAbstractClassconstructor and then continues with its own initialization. - Prototype inheritance is set up so that
ConcreteClassinherits fromAbstractClass. TheabstractMethodis overridden inConcreteClassto provide a concrete implementation.
Do comment if you have any doubts or suggestions on this JS class topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version