Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Overriding JavaScript functions

Suggested Videos
Part 58 - Properties in JavaScript
Part 59 - Static members in JavaScript
Part 60 - Prototype in JavaScript



In this video we will discuss how to override a JavaScript function. This is continuation to Part 60. Please watch Part 60 from JavaScript tutorial before proceeding.



In Part 60, we discussed that one of the advantages of using prototype property to add functions is that it enables us to override an existing function if required. Let us continue with the same example we worked with in Part 60.

function Employee(name)
{
    this.name = name;
}

Employee.prototype.getName = function ()
{
    return this.name;
}

var e1 = new Employee("Mark");
var e2 = new Employee("Sara");

document.write("e1.name = " + e1.getName() + "<br/>");
document.write("e2.name = " + e2.getName() + "<br/>");

Output :
e1.name = Mark
e2.name = Sara

Let us say for some reason we want to override getName() function of Employee object. Notice that in GetEmployeeDetails() function we have overridden getName() function of the Employee object. The overridden version converts the name of the Employee to UPPERCASE.

<script type="text/javascript">
    GetEmployeeDetails();

    function GetEmployeeDetails()
    {
        Employee.prototype.getName = function ()
        {
            return this.name.toUpperCase();
        }

        var e1 = new Employee("Mark");
        var e2 = new Employee("Sara");

        document.write("e1.name = " + e1.getName() + "<br/>");
        document.write("e2.name = " + e2.getName() + "<br/>");
    }

    function Employee(name)
    {
        this.name = name;
    }

    Employee.prototype.getName = function ()
    {
        return this.name;
    }
</script>

Output :
e1.name = MARK
e2.name = SARA

In this example, all the JavaScript is in the same file, i.e
1. The JavaScript that creates Employee constructor function and getName() function &
2. The script that overrides getName() function 

The JavaScript that creates Employee constructor function and getName() function could even be present in a separate JavaScript file. 

1. To your project add a new JScript file with name = EmployeeScript.js.

2. Copy and paste the following JavaScript code in EmployeeScript.js file

function Employee(name) 
{
    this.name = name;
}

Employee.prototype.getName = function () 
{
    return this.name;
}

3. Modify the code on the HTML page as shown below.

<html>
    <head>
        <script type="text/javascript" src="EmployeeScript.js">
        </script>
    </head>
    <body>
        <script>
            GetEmployeeDetails();

            function GetEmployeeDetails()
            {
                Employee.prototype.getName = function ()
                {
                    return this.name.toUpperCase();
                }

                var e1 = new Employee("Mark");
                var e2 = new Employee("Sara");

                document.write("e1.name = " + e1.getName() + "<br/>");
                document.write("e2.name = " + e2.getName() + "<br/>");
            }
        </script>
    </body>
</html>

Run the page and the output should be exactly the same as the previous example.

JavaScript built-in methods can also be overridden. The following example overrides the built-in JavaScript alert() function.
<script type="text/javascript">
    // Overriding JavaScript alert function to write to the page
    // instead of displaying the alert dialog box
    var alert = function (msg)
    {
        document.write(msg);
    }

    // The following calls will invoke the overridden alert() method   
    alert("Hello");
    window.alert(" JavaScript");
</script>

Output : Hello JavaScript 

JavaScript tutorial

1 comment:

It would be great if you can help share these free resources