JavaScript polyfill, by , Wednesday, April 2nd, 2014

The Object.create() method is very useful for creating objects of a specific prototype, but if you are using it and your visitors are using older browsers that do not support this feature, then you can use a polyfill. The first one, and the one I recommend that you use, is written by Douglas Crockford. I also recommend that you read the article in the link, as it gives a good explanation on why it is good practice to use Object.create. With that said, lets have a look at the code;

  1. if (!Object.create) {
  2. Object.create = function (o) {
  3. function F() {}
  4. F.prototype = o;
  5. return new F();
  6. };
  7. }

What happens here is, that first we check if the Object.create method is available in the browser. If it is not, we declare it and initialize it to be a function that takes one argument, which is the object you which to use as prototype. Inside the function, at line 3 the constructor F is declared to be empty. We then at line 4 set the prototype of F to be equal to the passed object, such that it now becomes the F functions prototype. Then finally we return a new instance of F. This is as simple as it gets, cutting to the essence of what it is we need done. While this is all good and useful, I still want to take a look at how the documentation says this method should work. So lets write a polyfill that follow that.

Object.create polyfill that follows the ECMAScript 5.1 standard

In this version I am going to try to follow the specifications as stated in section of the ECMAScript 5.1 standard. This is not a version that you would want to use as an actual polyfill for several reasons, one of them being, that it uses the Object.defineProperties methods, which only works in IE9 and newer. However I find it a good exercise writing according to documentation like this, so lets start out by looking at the finish result;

  1. if (!Object.create) {
  2. Object.create = function (O, Properties) {
  3. var obj;
  4. if (typeof O !== 'object' || O === null) {
  5. throw new TypeError();
  6. }
  7. obj = new Object();
  8. obj.prototype = O;
  9. if (Properties !== undefined) {
  10. Object.defineProperties(obj, Properties);
  11. }
  12. return obj;
  13. };
  14. }

The first two lines are not in the documentation, but are there for us to check if the Object.create methods is available and if it is not, declare and initialize it according to the specifications. Now lets follow it step by step;

1. If Type(O) is not Object or Null throw a TypeError exception.

  1. if (typeof O !== 'object' || O === null) {
  2. throw new TypeError();
  3. }

2. Let obj be the result of creating a new object as if by the expression new Object() where Object is the standard build-in constructor with that name.

  1. obj = new Object();

3. Set the [[Prototype]] internal property of obj to O.

  1. obj.prototype = O;

4. If the argument Properties is present and not undefined, add own properties to obj as if by calling the standard build-in function Object.defineProperties with arguments obj and Properties.

  1. if (Properties !== undefined) {
  2. Object.defineProperties(obj, Properties);
  3. }

5. Return obj.

  1. return obj;

That is all there is to the Object.create method. It simply creates a new object with a specific prototype, which is often very useful.