JavaScript Tutorial - Inheritance in JavaScript

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/inheritance-in-javascript.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 Inheritance in JavaScript with an example. Object oriented programming languages support inheritance. Since JavaScript is also an object oriented programming language, it supports inheritance. In Object oriented programming languages like C# and Java to implement inheritance, a class inherits from another class. In JavaScript, we don't have the concept of classes, so inheritance in JavaScript is prototype-based. This means to implement inheritance in JavaScript, an object inherits from another object. Let us understand this with an example. // Employee will be the base object (Similar to base class in c#) var Employee = function (name) { this.name = name; } // getName() function is added to the base object (Employee) Employee.prototype.getName = function () { return this.name; } // PermanentEmployee will be the derived object var PermanentEmployee = function (annualSalary) { this.annualSalary = annualSalary; } // Use prototype to associate Employee as the base object for PermanentEmployee PermanentEmployee.prototype = new Employee("Mark"); var pe = new PermanentEmployee(50000); // Derived object (permanentEmployee) can see the base object (Employee) getName() method document.write(pe.getName()); alert(pe instanceof Employee); // Returns true alert(pe instanceof PermanentEmployee); // Returns true Notice that the derived object (PermanentEmployee) can see the base object (Employee) getName() method. When getName() method is called, JavaScript first tries to find this method in the derived object (). It can't find the method there so it goes to the parent object and finds it there. If you add a new method to the parent object, it becomes available in the derived object. var Employee = function (name) { this.name = name; } Employee.prototype.getName = function () { return this.name; } // Adding getNameLength() method to the parent object // which becomes available in the derived object Employee.prototype.getNameLength = function () { return this.name.length + " characters"; } // PermanentEmployee will be the derived object var PermanentEmployee = function (annualSalary) { this.annualSalary = annualSalary; } PermanentEmployee.prototype = new Employee("Mark"); var pe = new PermanentEmployee(50000); // Call getNameLength() method added to the parent object document.write(pe.getNameLength()); // Output : 4 characters Use hasOwnProperty() method to determine if a property is defined on the actual object or it's prototype. Here is an example. var Employee = function (name) { this.name = name; } var PermanentEmployee = function (annualSalary) { this.annualSalary = annualSalary; } var employee = new Employee("Mark"); PermanentEmployee.prototype = employee; var pe = new PermanentEmployee(50000); document.write("Employee.name: " + employee.hasOwnProperty('name')); document.write("Employee.annualSalary: " + employee.hasOwnProperty('annualSalary')); document.write("PermanentEmployee.name: " + pe.hasOwnProperty('name')); document.write("PermanentEmployee.annualSalary: " + pe.hasOwnProperty('annualSalary')); Output : Employee.name: true Employee.annualSalary: false PermanentEmployee.name: false PermanentEmployee.annualSalary: true