Abstract classes in JavaScript

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss, how to implement abstract classes concept in JavaScript.

Object oriented programming languages like C# and Java, support abstract classes. Abstract classes are incomplete. So, trying to create an instance of an abstract class raises a compiler error. Abstract classes can only be used as base classes.

Let us first look at a simple C# example.

using System;

namespace Demo
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Error: Cannot create an instance of an abstract class
// Shape s = new Shape();

Circle circle = new Circle();

Response.Write(circle is Shape + "[br/]"); // Returns true
Response.Write(circle is Circle + "[br/]"); // Returns true
}
}

public abstract class Shape
{
public string shapeName = "None";
public string draw()
{
}
}

public class Circle : Shape
{
// Code specific to Circl class
}
}

Since JavaScript is also an object oriented programming language, it also supports the concept of abstract classes. Here is an example.

[script type="text/javascript"]
// Create a Shape object which is abstract
var Shape = function ()
{
throw new Error("Cannot create an instance of abstract class");
}

// Error : Cannot create an instance of abstract class
// var shape = new Shape();

// Add draw function to the Shape prototype
// Objects derived from Shape should be able to call draw() method
{
}

// Create a Circle object
var Circle = function (shapeName)
{
}

// Make shape the parent for Circle

var circle = new Circle("Circle");
// Since Circle inherits from abstract Shape object, it can call draw() method

alert(circle instanceof Circle); // Returns true
alert(circle instanceof Shape); // Returns true
[/script]

[jupiterscreams]

This was exactly what I was looking for! Thank you! (rewriting a java program I started almost 7 years ago in js)

[ManishSingh-lkqs]

I can use prototype and inheritance in place of abstraction concept then why we use abstract class, I mean what is benefit to use abstract class? Please describe it Sir?

[ramakrishnareddypeddamunth]

Hi Sir/All,
I have little doubt on inheritance concept in JavaScript. Why the shapeName property of Shape is not inherited to Circle ? I have posted below code, Could you please clarity on it.
var Shape = function () {
this.shapeName = 'none';
throw new Error('Cannot create an instance of an abstract class');
}

Shape.prototype.draw = function () {
return 'Drawing ' + this.shapeName;
}

var Circle = function () {
// Here am not passing shapeName argument, its just an empty Constructor function.
}

Circle.prototype =

var c = new Circle();
console.log(c.draw ()); // Drawing undefined

Why this.shapeName is not inherited from Shape prototype ?
Why should not display the output as 'Drawing none' ?

[o.voytyn]

Isn't it an inheritance ? Cause a Circle class inherits a Shape class.

[buskilamaor]

What about not implementing methods in the base class, which is the main thing in abstraction, otherwise its just inheriting the draw() function...?

[Sunilbn]

Fantastic Venkat!. I never thought of mimicing abstract classes in javaScript. This is a great tutorial which tries to explain javaScript by comparing with other regular OO languages.

[alexrinconz]

Thank you very muy sir! Greetings from Mexico

[devwratvishwkarma]

In the end of video (8:35), there should be a small correction. Instead of "This is how we implement Abstraction", You have mentioned "This is how we implement Polymorphism in JS".

[Elderofwaukeen]

This tutorial helped me a lot. Thanks.

[kooldandy]

If I remove "throw new Error" then I can make new instance of "Shape" class then how can you say it is an abstract class ??