ECMAScript 5.1: More Than One Way to Boil an Egg (or Inherit Properties in JavaScript)

This is a post by a newbie for newbies (and anyone interested in a newbie's take on things). If you're looking for a thorough exploration of JavaScript objects and prototypal inheritance, try this: Understanding "Prototypes" in JavaScript.

Briefly, ECMAScript 5 (as revised by ECMAScript 5.1) represents the latest evolution of the JavaScript language. I don’t expect to understand all the ins-and-outs and implications of the syntax it defines just yet (still wearing coding armbands), but it seems we’re on shifting sands; and when the ground starts moving, I like to get moving too.

Going back to the easy and elegant beginning, we can create objects directly using literal notation:

var personA = {
  name: "unicodegirl"
};

You might be used to creating multiple objects using object factories constructors and the new operator:

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

personA = new Person("unicodegirl");
personB = new Person("Humpty Dumpty");

A JavaScript object is a collection of named values, called properties. We use dot notation to refer to any property of an object, e.g.:

personA.name

As well as storing its own properties, an object typically points to another object, called its prototype object, whose properties it inherits. This falls under the coding mantra, Don’t Repeat Yourself (DRY):

Point to your prototype: All objects point to one prototype, or not at all. Functions point to their own prototype (intialised when a function is defined). Whenever a function is used as a constructor, the new operator fixes it so that the objects it creates all point to their constructor’s prototype, e.g.:

Person.prototype

Person.prototype is the space for isolating the properties Person objects share.

All objects are not created equal: While constructor-created objects are group orientated, object literals are inherent loners.

Object literals always point to Object.prototype (the default object prototype). This unalterability eliminates the prototype as a space to isolate properties for sharing across like objects, as properties of Object.prototype are visible to all objects.

Object.prototype marks the end of the prototype chain and does not point. You can also set an object’s prototype to null, e.g.:

var personA = Object.create(null);

This creates an empty object. We can use Object.create like literal notation to create objects directly. Unlike literal notation, we get to set the prototype (in the parenthesis).

I’m learning to code on Codecademy and haven’t come across this syntax for creating new objects there yet; I’m assuming it’s either a step beyond JavaScript Fundamentals, or else not widely embraced yet. ECMAScript 5 made a number of additions to the Object constructor, of which Object.create is just one. It definitely seems like a core part of the JavaScript language:

var createObject = function (o) {
  // we only want the prototype part of the `new`
  // behavior, so make an empty constructor
  function F() {}
 
  // set the function's `prototype` property to the
  // object that we want the new object's prototype
  // to be.
  F.prototype = o;
 
  // use the `new` operator. We will get a new
  // object whose prototype is o, and we will
  // invoke the empty function, which does nothing.
  return new F();
};

So, JavaScript programmers have always sought an easier way to set an object’s prototype. The latest syntax makes inheriting from other objects even more straightforward.

All modern browsers (including IE9) support the latest syntax. I’m guessing we’ll be learning more about it soon.