Saturday 1 September 2018

JavaScript: Inheritance

JavaScript supports prototype-based inheritance, One object inherit from other object.

If you create an object by using Constructor function, that object has the property ‘prototype’ by default.

Let me give an example. I am going to define an Employee constructor function like below.

function Employee(id, firstName){
         this.id = id;
         this.firstName = firstName;
}
        
Let me define two objects using Employee constructor function.

var emp1 = new Employee(1, "Hari Krishna");
var emp2 = new Employee(2, "Sudhir");

Suppose if you want to add two more properties like organization, country to all the instances of Employee objects (for existing objects and new objects), you need to use the prototype property.

Employee.prototype.organization = "XYZ";
Employee.prototype.country = "India";

Above statement adds the properties organization and country properties to all Employee instances.

prototype.html

<!DOCTYPE html>

<html>

<head>
    <title>objects</title>
</head>

<body>
    <script type="text/javascript">
        function displayObject(obj) {
            document.write("<br />");
            for (prop in obj) {
                document.write(prop + " : " + obj[prop] + "<br />");
            }
            document.write("<br />");
        }


        function Employee(id, firstName) {
            this.id = id;
            this.firstName = firstName;
        }

        var emp1 = new Employee(1, "Hari Krishna");
        var emp2 = new Employee(2, "Sudhir");

        displayObject(emp1);
        displayObject(emp2);

        Employee.prototype.organization = "XYZ";
        Employee.prototype.country = "India";

        displayObject(emp1);
        displayObject(emp2);
    </script>
</body>

</html>

Open above page in browser, you can able to see following text.

id : 1
firstName : Hari Krishna


id : 2
firstName : Sudhir


id : 1
firstName : Hari Krishna
organization : XYZ
country : India


id : 2
firstName : Sudhir
organization : XYZ
country : India


Can I add methods to an object using prototype?
Yes of course, you can also add methods using prototype.

Employee.prototype.getDetails = function(){
         return "[" + this.id + " " + this.firstName + "]";
}

Above statement adds the function getDetails to Employee.

prototype.html

<!DOCTYPE html>

<html>

<head>
    <title>objects</title>
</head>

<body>
    <script type="text/javascript">
        function Employee(id, firstName) {
            this.id = id;
            this.firstName = firstName;
        }

        var emp1 = new Employee(1, "Hari Krishna");
        var emp2 = new Employee(2, "Sudhir");

        Employee.prototype.getDetails = function() {
            return "[" + this.id + " " + this.firstName + "]";
        }

        document.write(emp1.getDetails() + "<br />");
        document.write(emp2.getDetails() + "<br />");
    </script>
</body>

</html>

Open above page in browser, you can able to see following text.

[1 Hari Krishna]
[2 Sudhir]

Inheriting properties from other object
By using prototype property, you can inherit the properties and methods of an object into other object.

var organization = {
         name : "xyz",
         city : "Bangalore"
}

function Employee(id, firstName){
         this.id = id;
         this.firstName = firstName;
}
                                                                                
I defined organization object using literal notation and created Employee constructor function.

Employee.prototype = organization;

Above statement sets the prototype of Employee to organization. So Employee instances inherit the organization properties like name and city.


prototype.html

<!DOCTYPE html>

<html>

<head>
    <title>objects</title>
</head>

<body>
    <script type="text/javascript">
        function displayObject(obj) {
            document.write("<br />");
            for (prop in obj) {
                document.write(prop + " : " + obj[prop] + "<br />");
            }
            document.write("<br />");
        }

        var organization = {
            name: "xyz",
            city: "Bangalore"
        }

        function Employee(id, firstName) {
            this.id = id;
            this.firstName = firstName;
        }


        Employee.prototype = organization;

        var emp1 = new Employee(1, "Hari Krishna");

        displayObject(emp1);
    </script>
</body>

</html>

Open above page in browser, you can able to see following text.

id : 1
firstName : Hari Krishna
name : xyz
city : Bangalore


Previous                                                 Next                                                 Home

No comments:

Post a Comment