Sql server, .net and c# video tutorial: 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.

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>

</head>

<body>

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.

// 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

Overriding JavaScript functions

1 comment: