search
top

How to Create a Reusable Class in JavaScript?

ShareShare on FacebookShare on Google+Email this to someoneTweet about this on TwitterShare on LinkedIn

JavaScript is known to improve the dynamics of your web pages by providing many interactive features. You might have knowledge of how to create class in object-oriented languages like C++ and Java. Once a class is defined, objects can be created to call its properties and methods.  As such there is no concept of a class in JavaScript, but creating your own class lets you exploit the reusability of class through its objects. As opposed to object-oriented language, in JavaScript an object can inherit other object instead of class inheriting other class.

Functions in JavaScript can be used to imitate the functionality of a class.

Let us take an example for creating JavaScript Class step by step:

1. Define a JavaScript function

var Fruit = function(texture, size, color) {

    this.texture = texture;

    this.size = size;

 // private variable without using “This key word”

    var color = color;

}

2. Create an object using the new keyword

var banana = new Fruit(‘rough’, ‘mini’, ‘yellow’);

You can directly access any attribute or method which is declared via “this” keyword inside the fruit class. For example, the value of attributes for Fruit class can be accessed via

var text = banana.texture;

var size = banana.size;

If you want to set the value of any attribute, you simply have to assign the new value through object reference. For example, the value of texture attribute can be assigned via

banana.texture = “smooth”

An important point to note here is that you cannot access the value of color attribute directly. This means that using banana.color is not valid because color is declared without “this” keyword which indicates that it is private.

 

Note: “this” keyword is used to declare attributes or methods as public inside a class.

 

Now, the obvious question is how can we can get and set the value of attribute color? We can get and set the value of a public attribute in one of the two ways:

  • using constructor (at creation time of object using new keyword)
  • using public method : this.setFruitColor method can get and set value of private attribute of Fruit Class

// public method

this.setFruitColor = function(value)

{

fruitColor = value;

};

 

// public method

this.getFruitColor = function()

{

return fruitColor;

};

//private method

function resetFruitColor()

{

fruitColor = null;

};

For example, we can get and set the attribute values as follows:

Var banana = new Fruit(‘rough’, ‘mini’, ‘yellow’);

OR

banana.setFruitColor(“yellow”);

To read the value

banana.getFruitColor();

3. A method can also be defined within the class to display the information about the fruit

this.display = function(){

return ‘This is a ‘ + this.texture + ‘, ‘ + this.size + ‘ ‘ +       this.color + ‘ ‘ + ‘banana ‘; };

4. Access properties and methods using the object

banana.color = “green”;

alert(banana.display());

 

Hence, invoking the display method, the following result will be obtained:

This is a rough, mini green banana.

 

There are two possible advantages of defining the method body inside the class:

1. It allows you to create another method with the same name in some other class. Hence, it prevents you from defining the methods in Global namespace.

2. When the lines of code and your script size is small, it is easy to map the associated method. But when the number of classes in your JavaScript increases, it becomes clumsy and difficult to understand at a later stage.

Hence, it is suggested to go by this alternative.

8 Responses to “How to Create a Reusable Class in JavaScript?”

  1. Niti says:

    I really like your writing style, great information, regards for putting up.

  2. furwitt says:

    Helpful and useful information

  3. bryant says:

    I wish to get across my appreciation for you in support of people that absolutely need help on this important topic.

  4. Weegam says:

    The know-how and kindness in dealing with the whole topic is very helpful.

  5. Bizaq says:

    Thank you a lot for giving everyone exceptionally breathtaking tips from this web site.

  6. lacoste polo says:

    Your very own dedication to getting the message all-around has been wonderfully functional and has in every case encouraged guys like me to attain their objectives.

  7. I am pleased that I detected this blog, exactly the right information that I was searching for! .

  8. Its superb as your other blog posts : D, appreciate it for putting up.

Leave a Reply

Your email address will not be published. Required fields are marked *

top