Object Oriented Programming in JavaScript: Part 2

Introduction

JavaScript is a prototype-based programming style of object-oriented programming in which classes are not present.

It can support OOP because it supports inheritance through prototyping as well as properties and methods.

Object Oriented Programming in JavaScript is known as prototype-based programming.

I have already explained the basics of OOP in JavaScript so it would be great if you go through with following link.

Object Oriented Programming in JavaScript: Part 1

In the last article we already discussed the following things:

  • Classes in JavaScript
  • Constructor in JavaScript
  • Properties in JavaScript
  • Object of JavaScript classes

Now we will learn methods in JavaScript classes.

Use the following procedure to create a sample to help understand how to create methods in JavaScript classes.

  1. Creating Class in JavaScript

    The following syntax is used for declaring a class in JavaScript:
    1. function Emp(NAME) {  
    2.     alert("EMP Instantiated");  
    3.     this.NAME = NAME;  

    Here Emp can be act as a class in JavaScript and this.NAME would act as a property.

    The body of Emp acts as the constructor and is called as soon as we create an object of the class.
     
  2. Defining Methods of JavaScript classes
    1. Emp.prototype.Fun1 = function ()  
    2. {  
    3.    alert("EMP NAME is :" + this.NAME );  

    We can create a method using the syntax above. Here Fun1 would act as a method of the EMP class.

    Prototype
  3. Calling functions
    1. var Emp1 = new Emp('DEVESH');  
    2. var Emp2 = new Emp('ROLI');  
    3.   
    4. Emp1.Fun1();  
    5. Emp2.Fun1()  

    Here we created two instances of EMP, EMP1 and EMP2 and passed a parameter to the constructor to assign a NAME Property.

    Using EMP1.Fun1() and EMP2.Fun1() we are calling the functions.

    We have defined an alert inside this function:

    function
     
  4. Running the code

    After running the code we will get two alerts, each for EMP1.fun1() and Emp2.Fun1();

    alert
     
  5. Other ways to create JavaScript objects

    We can create an object in JavaScript in the following way also:
    1. var EMP = {  
    2.     firstName:"ROLI",  
    3.     lastName:"GUPTA",  
    4.     age:28,  
    5.     sex:"F"  
    6. }; 
  6. Accessing EMP objects

    objects

    1. alert("EMP NAME: " + EMP.firstName + " " + EMP.lastName + " EMP AGE: " + EMP.age + " EMP SEX : " + EMP.sex);
    Complete Code
    1. var EMP = {  
    2.    firstName: "ROLI",  
    3.    lastName: "GUPTA",  
    4.    age: 28,  
    5.    sex: "F"  
    6. };  
    7. alert("EMP NAME: " + EMP.firstName + " " + EMP.lastName + " EMP AGE: " + EMP.age + " EMP SEX : " + EMP.sex); 
  7. Running the code

    Running the code
     
  8. Defining Methods
    1. var EMP = {  
    2. firstName: "ROLI",  
    3. lastName: "GUPTA",  
    4. age: 28,  
    5. sex: "F",  
    6. fullName: function () { return this.firstName + " " + this.lastName }  
    7. };  
    8. alert("Full name is: "+EMP.fullName()); 
    We have defined the fullName method inside the EMP class.

    It returns the join of fname and lname.

    Running the code

    code
Conclusion

This document explains methods in JavaScript classes.