Posts Tagged ‘JavaScript’

Classical inheritance in JavaScript

August 8th, 2010 by JorisO | No Comments | Filed in Front-end development, JavaScript

JavaScript currently lacks classes in the classical sense, but it can be made to imitate classical class-based inheritance hierarchies with a few simple helper functions.

There’s a lot of different opinions on how JavaScript should be made to imitate classical inheritance patterns. The below is just one method of many.

JavaScript Class

The JavaScript object used to represent a class is basically just a constructor function: 

function Animal(name){
  this.name = name;
}

//add a method
Animal.prototype.getName = function(){
  return this.name
}
//create an instance
var animal  = new Animal('Tom');

JavaScript subClass

To now allow a new class to subClass our new JavaScript class we need something that performs similar task to the ‘extends’ functionality in languages as Java and PHP.

We can define a JavaScript ‘extends’ function as follows:

function extends(childClass, parentClass){
  var O = function(){}; //create new object to contain parentClass prototype without instantiating parentClass.
  O.prototype = parentClass.prototype
  childClass.prototype = new O(); //setup prototype chain
  childClass.prototype.constructor = childClass; //reset constructor to childClass

  childClass.parentClass = parentClass.prototype; //provide parentClass attribute for childClass constructor functions
  if(parentClass.prototype.constructor == Object.prototype.constructor){
    parentClass.prototype.constructor = parentClass;
  }
}

Now to create a subclass of Animal :

function Sloth(name,bananas){
   Sloth.parentClass.constructor.call(this,name);
   this.bananas = bananas;
}

extend(Sloth,Animal);
Sloth.prototype.getBananas = function(){
  return this.bananas;
}

Now if we’d want to override yet incorporate a parents method in the childClass we could do :

  Sloth.getName = function (){
    var name = Sloth.parentClass.getName.call(this);
    return name + ' was provided by overridden method';
  }

Tags: ,

What does ‘this’ mean inside my JavaScript function

August 1st, 2010 by JorisO | No Comments | Filed in JavaScript

In JavaScript the behavior of the ‘this‘ keyword inside a closure created by a function/method can be confusing at times. But ‘this’ doesn’t have to be a real problem. The rules that govern what ‘this‘ denotes inside a function call are actually few and simple. There’s only a few different situations that need to be understood to know this.
this

Option 1 : this is inside a method:

When a function is part of an object and called as such it is also referred to as method.
As would be expected ‘this‘ then refers to the object containing the method.

var obj = {
  showThis:function(){
    console.log(this);
  }
}
obj.showThis();  //will output the obj object;

Option 2 : this is inside a function:

When a function is not invoked as part of an user defined object the ‘this’ keyword is bound to the global object. Even if the function definition happens inside another object or function the ‘this’ keyword will still refer to the global object. If we want to use the inner function to refer to the same ‘this’ that the containing function uses, this must be assigned to another variable inside that both inner and containing function have access to: 

var obj = {
  showThis:function(){
    console.log(this);
  }
}

obj.containing = function(){
  var that = this;
  var innerFunction = function(){
    that.showThis();
  }
  innerFunction(); // outputs
 }

obj.containing();  // outputs obj;

Option 3 : this is inside a constructor

When the ‘new‘ keyword is used to call a function, a new object is created with a link to the prototype property. The ‘this’ keyword will now refer to this newly created object. 

var Obj = function(mode){
  this.mode = mode;
  this.color = 'green';
}
Obj.prototype.setColor = function(color){
  this.color = color;
  console.log(this)
}
var obj = new Obj('bleh').setColor('purple');  // outputs the obj as instance or copy of Obj, but with properties color as purple and mode set to 'bleh'.

Option 4 : this is inside a function called with the ‘apply‘ method

The apply method of the Function object allows us to specify the meaning of the this keyword inside a function call ourselves. The first argument of apply is the object that ‘this’ will refers to inside the function body and the second (optional) argument is an array of arguments to that function.

An example of this can be found here :
http://www.hardcode.nl/archives_139/article_514-supplying-context-to-handler-lookup-table-in-jquery.htm

Tags: ,

JavaScript Object Oriented Programming

June 20th, 2010 by JorisO | 1 Comment | Filed in Front-end development, JavaScript

Practical usage of classical object oriented programming methodology in any scripting or programming language can usually be explained by setting apart the language-specific implementation of the principles of polymorphism, inheritance and encapsulation.

JavaScript is somewhat of a different animal when it comes to object oriented programming. It is one of the few widely spread (or even the most widely spread) fully prototype-based programming languages. Prototype based languages depend on premises different from what most programmers familiar with object oriented programming techniques have come to rely on.

(more…)

Tags: ,