Responsible JavaScript: Prototype Modification

JavaScript is a fully object oriented programming language that supports multiple inheritance models. At the heart of it all, JavaScript uses prototypal inheritance. Even the default types (String, Boolean, Number, …) are objects themselves. When you “extend” something, you don’t extend a class — instead, objects inherit directly from other objects.

Some libraries (Prototype, for example) make heavy use of modifying native object prototypes. This has the instant effect of adding significant functionality to all instances of the native objects.

// Create a new array instance and populate it with some data.
var a = ['foo', 'bar', 'baz'];

// Modify Array's prototype to include new functionality
Array.prototype.each = function (callback) {
    for (var i = 0, l = this.length; i < l; i++) {
        callback(this[i], i);
    }
};

// Even though 'a' was defined prior to the pototype modification,
// the effects are visible. This is the power of prototypal inheritance.
a.each(function (value, index) {
    console.log(index + ' === ' + value);
});

While the temptation is great, responsible developers should think twice about modifying native object prototypes. One may argue that “additive” methods pose no harm. Still, by adding behavior, your casting your dependencies on the language itself thereby making documentation and debugging challenging.

What’s even worse is when developers get clever and modify Object.prototype. This of course has the effect of modifying all objects of all types. The most obvious repercussion of this is that it breaks the for..in pattern which is commonplace in most JavaScript applications

Object.prototype.foo = function () {
    console.log('foo');
};

var o = {'hello':'world'};

for (var i in o) {
    console.log(i + ' === ' + o[i]);
}

At this point, the pros in the crowd will yell “yeah, you should be using hasOwnProperty.” And rightfully so, as that is the only way to insure that we’re dealing with members local to our object in question. But what if we want to get an aggregate list of properties local and inherited? If you’ve futzed with Object.prototype, you’ll have to use recursion … I hope you’re happy now.

Don’t Modify. Extend.

Instead of modifying the native object, simple create a new data type by extending it as you would any other object.

var MyArray = function () {};
MyArray.prototype = new Array;

var ma = new MyArray;
ma.push('foo');
ma.push('bar');
ma.push('baz');

console.log(ma.join(','));

This technique offers the same end result without compromising the integrity of the application. It’s more portable and allows for easy documentation. This is also the natural action if you are familiar with classical inheritance. While applying classical development methodologies to languages such as JavaScript is generally a bad idea, in this particular case it’s the responsible thing to do.