User Name:


User Email:




This information will only be saved for the purposes of communicating with those who have provided this information voluntarily regarding our services.We will never sell your name or email address to anyone.
© 2018 - First Crazy Developer (Abhishek Kumar)
  

crazydeveloper 3 ways to define a JavaScript class

JavaScript is a very flexible object-oriented language when it comes to syntax. In this article we can find three ways of defining and instantiating an object. Even if you have already picked your favourite way of doing it, it helps to know some alternatives in order to read other people's code.

It's important to note that there are no classes in JavaScript. Functions can be used to somewhat simulate classes, but in general JavaScript is a class-less language. Everything is an Object. And when it comes to inheritance, objects inherit from objects, not classes from classes as in the "class"-ical languages.

1. Using a function

This is probably one of the most common ways. You define a normal JavaScript function and then create an object by using the new keyword. To define properties and methods for an Object created using function(), you use the this keyword, as seen in the following example.

  1. function Apple (type) {
  2. this.type = type;
  3. this.color = "red";
  4. this.getInfo = getAppleInfo;
  5. }
  6. // anti-pattern! keep reading...
  7. function getAppleInfo() {
  8. return this.color + ' ' + this.type + ' apple';
  9. }

To instantiate an Object using the Apple constructor function, set some properties and call methods .

Look at the following code:


  1. var apple = new Apple('macintosh');
  2. apple.color = "reddish";
  3. alert(apple.getInfo());

Now moved ahead and start discuss: Methods defined internally

In the above code we can see that the method getInfo() of the Apple "class" was defined in a separate function getAppleInfo(). While this works fine, it has one drawback – we may end up defining a lot of these functions and they are all in the "global namespece". This means we may have naming conflicts if we (or another library we are using) decide to create another function with the same name. The way to prevent pollution of the global namespace, we can define our methods within the constructor function.


Look at the following code:

  1. function Apple (type) {
  2. this.type = type;
  3. this.color = "red";
  4. this.getInfo = function() {
  5. return this.color + ' ' + this.type + ' apple';
  6. };
  7. }

Using this syntax changes nothing in the way we instantiate the object and use its properties and methods.

After all above discussion now move to new topic: "Methods added to the prototype"

A drawback of above method getInfo() is recreated every time you create a new object. Sometimes that may be what you want, but it's rare. A more inexpensive way is to add getInfo() to the prototype of the constructor function.


Look at the following code:

  1. function Apple (type) {
  2. this.type = type; this.color = "red";
  3. }
  4. Apple.prototype.getInfo = function() {
  5. return this.color + ' ' + this.type + ' apple';
  6. };

Again, we can use the new objects exactly the same way as in above example.

2. Using object literals:

Literals are shorter way to define objects and arrays in JavaScript. With this we can create an empty object.


Look at the following code:


var o = {};
instead of the "normal" way:
var o = new Object();
For arrays we can do:
var a = [];
instead of:
var a = new Array();


So we can skip the class-like stuff and create an instance (object) immediately. Here's the same functionality as described in the above examples, but using object literal syntax this time look at the following code:

  1. var apple = {
  2. type: "macintosh",
  3. color: "red",
  4. getInfo: function () {
  5. return this.color + ' ' + this.type + ' apple';
  6. }
  7. }

In the above case we don't need to (and cannot) create an instance of the class, it already exists. So we simply start using this instance.

  1. apple.color = "reddish";
  2. alert(apple.getInfo());

Such an object is also sometimes called singleton. In "classical" languages such as Java, singleton means that we can have only one single instance of this class at any time, you cannot create more objects of the same class. In JavaScript (no classes, remember?) this concept makes no sense anymore since all objects are singletons to begin with.

3. Singleton using a function

Again with the singleton, eh? :)

The third way presented in this article is a combination of the other two we already saw. We can use a function to define a singleton object.


Look at the following code:

  1. var apple = new function() {
  2. this.type = "macintosh";
  3. this.color = "red";
  4. this.getInfo = function () {
  5. return this.color + ' ' + this.type + ' apple';
  6. };
  7. }

So we can see that this is very similar to discussed above, but the way to use the object is exactly like in second example.

  1. apple.color = "reddish";
  2. alert(apple.getInfo());

new function(){...} does two things at the same time: define a function (an anonymous constructor function) and invoke it with new. It might look a bit confusing if you're not used to it and it's not too common, but hey, it's an option, when we really want a constructor function that you'll use only once and there's no sense of giving it a name.


Happy reading!

Abhishek


crazydeveloper Home Page 22 August 2015

Become a Fan