Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Abstract classes in JavaScript

Suggested Videos
Part 60 - Prototype in JavaScript
Part 61 - Overriding JavaScript functions
Part 62 - Inheritance in JavaScript



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.

1. Open visual studio and create a new empty asp.net web application project.

2. Add a web form to the project. Name it WebForm1.aspx. Copy and past the following code in the code-behind file.

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();
            circle.shapeName = "Circle";
            Response.Write(circle.draw() + "<br/><br/>");

            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()
        {
            return "Drawing " + this.shapeName;
        }
    }

    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.

Add a new HTML page to the project. Name it HTMLPage1.htm. Copy and paste the following code in HTMLPage1.htm.

<script type="text/javascript">
    // Create a Shape object which is abstract
    var Shape = function ()
    {
        this.shapeName = "None";
        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
    Shape.prototype.draw = function ()
    {
        return "Drawing " + this.shapeName;
    }

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

    // Make shape the parent for Circle
    // Object.create() allows to create an object without using constructor
    Circle.prototype = Object.create(Shape.prototype);

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

    alert(circle instanceof Circle); // Returns true
    alert(circle instanceof Shape);  // Returns true
</script>

JavaScript tutorial

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.