Exploring JavaScript Inheritance: The extend method

by bhayden
1. July 2012 22:16

In my previous post I gave an overview of some inheritance techniques I’ve begun using in recent projects.  In this post I’m going to explore one of the key pieces that finally clicked for me.

The extend method is a method that I added to my objects that allows me to take one object and then add properties to it to create a new object that contains the functionality of the base object and the new properties.  Here is the extend function again:

   1:  function(properties) {
   2:      var property, newObject;
   3:      newObject = Object.create(this);
   4:      for (property in properties) {
   5:          if (properties.hasOwnProperty(property)) {
   6:              newObject[property] = properties[property];
   7:          }
   8:      }
   9:      newObject.parent = this;
  10:      return newObject;
  11:  }

If you’re not familiar with Object.create then I suggest you read this article by Douglas Crockford.  In this case we pass the create function this so that it creates an instance of the current object.  The real “magic” of the extend function happens from lines 4 to 7.  What I’m doing here is looping through all the properties that were passed into the function and then adding them the new object.  The call to hasOwnProperty on line 5 ensures that   we only copy direct properties that were passed in and not properties added through the prototype chain.

The final piece of the puzzle is creating a parent property on the newObject and setting it to this.  By creating a parent property we can now call base object functionality in our new objects.  Here is a simple JSFiddle demonstrating the usage of extend.  First I created a simple basic base object.

   1:  var baseObject = {
   2:      name: function() {
   3:          console.log("Base");
   4:      },
   5:      extend: function(properties) {
   6:          var property, newObject;
   7:          newObject = Object.create(this);
   8:   
   9:          for (property in properties) {
  10:              if (properties.hasOwnProperty(property)) {
  11:                  newObject[property] = properties[property];
  12:              }
  13:          }
  14:          newObject.parent = this;
  15:          return newObject;
  16:      }
  17:  };

I then created a simple inherited object using extend:

   1:  var inheritedObject = baseObject.extend({
   2:      name: function() {
   3:          this.parent.name();
   4:          console.log("inherited");
   5:      }
   6:  });

Now when we create an inherited object and call name, we will get both base and inherited printed out:

   1:  var test2 = Object.create(inheritedObject);
   2:  //will print out "base" and "inherited"
   3:  test2.name();  

The extend function is something that gives us a lot of flexibility in creating objects.  Now that I’ve finally wrapped my head around it this will be something that I use a lot more in my projects moving forward.

Tags:

Comments are closed

RecentPosts