el

Object-Oriented programming in JavaScript

Thursday, October 17, 2019

This blog starts with an Introduction to object-oriented programming with JavaScript like other object-oriented programming language like C# or Java. How to create class: function employee() { // define the employee Class without parameters this.firstName; this.lastName; this.age; } var e = new employee(); e.firstName = "Kumar"; e.lastName = "Bharat"; e.age = 22; alert("First Name: " + e.firstName + " Last Name: " + e.lastName + " Age: " + e.age); function employee(firstName, lastName, age) { // define the employee Class with parameters this.firstName = firstName; this.lastName = lastName; this.age = age; } var e = new employee("Kumar", "Bharat", 22); alert("First Name: " + e.firstName + " Last Name: " + e.lastName + " Age: " + e.age); //First Name: Kumar Last Name: Bharat Age: 22 How to add methods to class: We can add any number of methods within a class or without modifying a class.

  1. We can write methods inside the class.

function employee(firstName, lastName, age) { // write the method inside the class this.firstName = firstName; this.lastName = lastName; this.age = age; this. empInfo = function(){ return "First Name: " + this.firstName + " Last Name: " + this.lastName + " Age: " + this.age; }; } var e = new employee("Kumar", "Bharat", 22); alert(e.empInfo()); //First Name: Kumar Last Name: Bharat Age: 22

  1. We can also add methods without changing the class.

function employee(firstName, lastName, age) { // can attached the method on prototype this.firstName = firstName; this.lastName = lastName; this.age = age; } employee.prototype.empInfo = function(){ return "First Name: " + this.firstName + " Last Name: " + this.lastName + " Age: " + this.age; } var e = new employee("Kumar", "Bharat", 22); alert(e.empInfo()); //First Name: Kumar Last Name: Bharat Age: 22 How to inherit a class: Only one level of inheritance is possible in JavaScript. Here “employee” class inherit “payroll” class. function payroll(basicSalary, HRA, Bonus) { this.basicSalary = basicSalary; this.HRA = HRA; this.Bonus = Bonus; this. totalSalary = function(){ return (this.basicSalary + this.HRA + this.Bonus); }; } function employee(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; this. empInfo = function(){ return "First Name: " + this.firstName + " Last Name: " + this.lastName + " Age: " + this.age; }; } employee.prototype = Object.create(payroll.prototype); // inheritance var e = new employee("Kumar", "Bharat", 22); alert(e.empInfo()); e.constructor(1000, 600, 100); alert("Total Salary: " + e.totalSalary()); How to overload a method: Generally method overloading is not directly possible in in javascript, here I create a custom function which can overload a method. Here “empDoTask” method is overload like empDoTask(task1) and empDoTask(task1, task2) function employee(firstName, lastName, age) { // method overloading this.firstName = firstName; this.lastName = lastName; this.age = age; this.empInfo = function () { return "First Name: " + this.firstName + " Last Name: " + this.lastName + " Age: " + this.age; }; overloadMethod(this, "empDoTask", function (task1) { alert("Do task: " + task1); }); overloadMethod(this, "empDoTask", function (task1,task2) { alert("Do task: " + task1 + " and " + task2); }); } var e = new employee("Kumar", "Bharat", 22); alert(e.empInfo()); e.empDoTask('task1'); e.empDoTask('task1', "task2"); function overloadMethod(obj, methodName, func) { var old = obj[methodName]; obj[methodName] = function () { if (func.length == arguments.length) return func.apply(this, arguments); else if (typeof old == 'function') return old.apply(this, arguments); }; } By: Kumar Bharat Bhusanam

No items found.