Wednesday, July 17, 2013

Ways to define a class in Javascript

Developers who come from famous OO languages such as Java/C++, like myself, may often find defining class in JavaScript confusing. This article aims to provide a very basic "class definition" in JavaScript.

Few notes on JavaScript nature
  • there is no class actually,  usual class concept in Java/C++ can hardly apply
  • everything are basically object literal, simply key-value collection
  • value of an object can be accessed by notation ".key" or "[key]"

Let's begin with a simple example below.

var eddie = { name: "Eddie", age: 25 };
var steven = { name: "Steven", age: 72 };
var benny = { name: "Benny", age: 3 };

1. Object Literal

Above objects eddie, steven, benny are all defined by object literal notation. It doesn't define any class, everything is raw but simple.

  • you can access the fields (properties) in this object like this:
  • eddie.name prints Eddie
  • steven["age"] prints 72
  • you can add new property dynamically

eddie.gender = 'M';
benny.gender = 'M';

  • pros: simple, intuitive
  • cons: not reusable. Imagine when you want to define function (e.g. getName()) among all persons. >

You need a way to define a class.

2. Constructor Function

2.1 class definition
var Person = function(name, age) {
      this.name = name;
      this.age = age;
      this.getName = function() {
            return this.age;
      }
}

  • Person is called constructor function
  • constructor function will implicitly return this to caller 
  • use keyword new to invoke constructor function, as below

2.2 object creation

var eddie = new Person("Eddie", 25);
var steven = new Person("Steven", 72);
var benny = new Person("Benny", 3);

  • new will allocate new memory, and this in constructor function will reference to the new memory
  • "eddie.name" will print Eddie
  • "benny.getName()" will print Benny

2.3 syntax
  • var Person = function(name, age) { ... } is the equivalent to 
  • function Person(name, age) { ... }

2.4 memory concern
  • note that memory of function getName() is allocated in every instance. To solve this, move the function from constructor function to prototype.
Person.prototype.getName = function() {
      return this.name;
}

This way, only a single copy of getName would exist in memory.
  • "benny.getName()" will still print Benny

2.5 incorrect object creation

var john = Person("John", 11);
  • if "new" is missing (likely by mistake), you are NOT calling constructor function. 
  • "this" will reference to global context, window. Effectively, you are doing the following:
window.name = "Kalok";
window.age = 11;

  • "typeof john" will return undefined, because "implicit return this" would not apply without "new"

3. That vs This

To address the issue "this" may refer to global context, here's a possible solution.

var Person = function(name, age) {
      // define an empty object literal
      var that = {};

      // assign to that instead of this
      that.name = name;
      that.age = age;

      // return that explicit
     return that;
}

  • "that" is just a dummy word, use "self", "_this" or whatever meaningful to you
  • the disadvantage of this solution is it loses the link to prototype, not good enough in most cases.

4. Self-invoking Constructor

Now we go back to the class definition at the beginning, and check whether this is an instance of the constructor itself.

var Person = function(name, age) {
      if (!this instanceof Person)) {
            return new Person(name, age);
      }
      this.name = name;
      this.age = age;
      this.getName = function() {
            return this.age;
      }
}

2 comments:

  1. not good enough in most cases.Saglik Bilgileri
    Online Film izle of this solution is it loses the link to prototype,

    ReplyDelete
  2. As stated by Stanford Medical, It is really the one and ONLY reason this country's women get to live 10 years longer and weigh 42 pounds lighter than us.

    (Just so you know, it is not about genetics or some hard exercise and absolutely EVERYTHING around "how" they eat.)

    BTW, What I said is "HOW", not "what"...

    TAP this link to discover if this short test can help you unlock your real weight loss possibilities

    ReplyDelete