JavaScript Tutorial - Overriding JavaScript functions

Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/02/overriding-javascript-functions.html 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. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 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; } 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