Shahed Khan (MVP)

Javascript Tips: Carefully use "this" when writing classes, else you may cause memory leak.

Lets say we want to declare a class in Javascript, which is equivalent to the following C# class.

public class Student
{
  public string FirstName = "";
  public string LastName = "";

  public Student( string firstname, string lastname)
  {
    this.FirstName = firstname;
    this.LastName = lastname;
  }
  
  public string GetFullName()
  {
    return FirstName + LastName;
  }
}

To write a similar class in JavaScript we can do something like the following [ but this will create memory leak, I am explaining that in a moment ]

function Student ( firstname, lastname)
{
  this.FirstName = firstname;
  this.LastName = lastname;

  this.GetFullName = function()
  {
    return this.FirstName + this.LastName;
  }

}

now in C# if we want to instantiate an object of Student and want to call the GetFullName() method, we do the following.

Student student = new Student("Shahed", "Khan");
string fullname = student.GetFullName();

and we can create as many objects as we want and call its methods, each of the object will maintain its own state, and all objects will use the same copy of the GetFullName()  method.

But Javascript has different behaviour when we do the following on the above Javascript class.

var student = new Student("Shahed","Khan");
car fullname = student.GetFullName();

In Javascript, functions are treated as variables as a result when we create a new object of Student it creates  new sets of firstname, lastname and also a new copy of GetFullname method, as a result we are creating memoryleak.

Do not worry too much, there is a workaround for this, lets redefine the class in a different way.

function Student ( firstname, lastname)
{
  this.FirstName = firstname;
  this.LastName = lastname;

  this.GetFullName = GetFullName;

}

function GetFullName()
{
  return this.FirstName + this.LastName;
}

Updated 24th Feb
===============
Laurent from Galasoft gave some good feedback, 
JavaScript object oriented should be done by modifying the prototype property of the object, and never by storing methods using the "this" keyword. The workaround provided above is not good practice, as it forces the use of a global function. We should always declare methods in JavaScript object like this:
 
function Student(firstName, lastName)
{
 this.firstName = firstName;
 this.lastName = lastName;
}

Student.prototype =
{
 getFullName : function()
 {
   return this.firstName + " " + this.lastName;
 }
}

also note correct naming convension, ( Javascript follows Java notation not C#). For JavaScript best practices please refer to the work of Microsoft Silverlight team.

Print | posted on Thursday, February 21, 2008 5:38 PM |