JavaScript IS Object Oriented Programming

I spent a good half hour writing an answer to a question on Quora today and I thought it was good enough to qualify as a blog post. The question was How do you implement object orientation in JavaScript?

I’ll be honest, I was a little disappointed by the answers posted prior to mine, however that just fueled the fire and gave me good reason to thoroughly and properly answer the question. As always, I like to let the code do the most talking.

This was the answer I posted:

The real answer is JavaScript IS object oriented already, without any “help” from libraries. It seems that most developers simply don’t get it, and cannot get past the concept of traditional “Classes”. Javascript is a prototypal, object oriented, instance based programming language. In JavaScript, everything is an object that can have properties and methods (sounds familiar, right? maybe like… “classes”?). Behavior and characteristic reuse is accomplished by extending, or “decorating” an existing object; the existing object serves as a “blueprint” or more literally, a prototype.

In JavaScript, traditional classes do not exist, however the equivalent is surprisingly simple and straight forward, all you need is a function(){}:

blanky.js

//  Posted at: http://www.quora.com/How-do-you-implement-object-orientation-in-JavaScript

function SafetyBlanket() {
  this.isObject = true;
}

// Declare and assign a new instance
var blanky = new SafetyBlanket();


console.log(blanky); // `object definition`

To be really, really picky…

always-an-object.js

console.log(blanky); // `object definition`
console.log(typeof blanky); // object

console.log(blanky.__proto__); // object
console.log(typeof blanky.__proto__); // object

console.log(blanky.constructor); // SafetyBlanket()
console.log(typeof blanky.constructor); // function

console.log(blanky.constructor.prototype); // object{}
console.log(typeof blanky.constructor.prototype); // object

// Notice it always comes back to an object

// ------------------------

console.log(blanky.isObject); // true
console.log(typeof blanky.isObject); // boolean

console.log(blanky.isObject.__proto__); // object
console.log(typeof blanky.isObject.__proto__); // object

console.log(blanky.isObject.constructor); // Boolean()
console.log(typeof blanky.isObject.constructor); // function

console.log(blanky.isObject.constructor.prototype); // false {}
console.log(typeof blanky.isObject.constructor.prototype); // object

// Again, it always comes back to an object

The “class” or object instance can be extended/decorated:

extend.js

function SafetyBlanket(material) {
  this.isObject = true;
  this.madeOf   = material;
}

// Extend the prototype with a new method
SafetyBlanket.prototype.tuckIn = function() {
  return this.madeOf;
}

// Declare and assign a new instance
var myBlanky    = new SafetyBlanket('silk'),
    yourBlanky  = new SafetyBlanket('fiberglass');

console.log(myBlanky);
console.log(yourBlanky);

console.log(myBlanky.tuckIn());
console.log(yourBlanky.tuckIn());

The “class” or object instance can be inherited:

inherit.js

function Developer(lang) {
  this.isObject = true;
  this.prefs    = {
    lang: lang
  };
}

Developer.prototype.getPrefs  = function () {
  return this.prefs;
};

function FrontEnd() {}
function BackEnd()  {}

FrontEnd.prototype  = new Developer('javascript');
BackEnd.prototype   = new Developer('python');

// Reassign the constructor to reflect itself
FrontEnd.prototype.constructor  = FrontEnd;
BackEnd.prototype.constructor   = BackEnd;


// Extend the prototype with a new method
FrontEnd.prototype.getDOMWindow = function () {
  return window;
}

// Extend the prototype with a new method
BackEnd.prototype.getInterpreter = function () {
  return this;
}

// Inspect them now, they have the characteristics of
// the Developer object as well as their own methods
console.log(FrontEnd.prototype);
console.log(BackEnd.prototype);


// Declare new instances of our two objects
var frontEndDev = new FrontEnd(),
    backEndDev  = new BackEnd();

// To be sure, run their methods
console.log(frontEndDev.getDOMWindow());
console.log(backEndDev.getInterpreter());

As you can see, JavaScript doesn’t need any libraries to “implement object orientation”, as it is VERY capable on its own.

If you want to play with this code, I’ve posted a Gist at Github: https://gist.github.com/553982

Edit Thanks to Dmitry for reminding me of his excellent resource