Class and Prototypes in JavaScript

Functional Class

Fundamentally, a function as a value on an object in JavaScript is called a method. Functional Classes in JavaScript are simply functions, which create a new object that contain methods and are donated by a capital first letter.

var Queue = function () {
var newObj = {};
newObj.method1 = function() {};
newObj.method2 = function() {};
return newObj;

};

Functional Shared Classes

Functional shared Classes will not contain their methods within the function in order for them to be used by other functions. An object is still created inside the function and returned. At the time the function is called and the object is created, the methods and their results are added to the object. If the methods change after this point, this object will not be updated.

  • Function creates and returns an object
  • Assignment of methods to object
  • Methods are copied at call time of the function
  • Use the keyword this in the methods to refer to the object that called it

var Queue = function () {
var newObj = {};
newObj.method1 = someMethod.method1;
newObj.method2 = someMethod.method2;
return newObj;
};

someMethod.method1 = function() {
this.count++;
return this.count
};
someMethod.method2 = function() {};

Prototypal

This is used in conjunction with the new keyword along with Object.create(obj).

The fact that the methods can be reused is very similar to functional shared, however, this creates a direct prototype link to the methods and the methods are used when the object created fails to find the property on it’s own object.

  • Must return an object in the function
  • A reference is created from the object to the methods via Object.create()
  • Methods are NOT copied at call time of the function
  • Methods are called at call time of the method
  • Use the keyword this in the methods to refer to the object that called it

var Queue = function () {
var newObj = Object.create(someMethod); // creates an object
return newObj;
};

var someMethod = {}; // create method object
someMethod.method1 = function() { // use prototype property
this.count++;
return this.count
};

someMethod.method2 = function() {};

var prototypeObj = new Queue(); // call new on the class

Pseudoclassical

The last one utilizes the built in property to all objects Object.prototype to store all of the methods on the object. This method does not require the creation of a new object, the assignment of the object to the methods (using Object.create) nor the return of that object inside the function class as JavaScript will do that for you. Again, the methods are called at call time and this is not a copy of the methods onto the object.

  • JavaScript creates and returns an object (magically)
  • The reference from the object to the methods is via the Object.prototype property
  • Methods are NOT copied at call time of the function
  • Methods are called at call time of the method
  • Use the keyword this in the methods to refer to the object

var Queue = function () {
var count = 0;
};

Queue.prototype.method1 = function() { // use prototype property
this.count++;
return this.count
};
Queue.prototype.method2 = function() {};

var prototypeObj = new Queue();

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s