Javascript Inheritance

Before I started working on Squad, most of my experience with object oriented programming came from C++, Java and .Net classes in school, all of which use traditional, class-based OOP. Upon joining Code Together, I was dropped into an existing code base written by programmers who were more experienced at this kind of thing than I was. I was skilled in PHP and jQuery, but had little experience with object oriented PHP and almost no experience with vanilla Javascript.

As you may know, PHP’s object oriented features are, like C++ and Java, class-based. You define classes with properties and methods, extend those classes to make new classes, and create objects which are instances of those classes. Adjusting to OOP PHP in the Zend Framework took a little time, but was fairly straight forward.

Adjusting to more advanced Javascript was more challenging because it is prototype-based and does not use classes, with which I was familiar. After a while, I did become more comfortable with javascript and prototypes and have used it to great success.

One of the main concepts I struggle with is inheritance in prototype-based OOP. A lot of the web references on Google and Bing on the topic try to come up with neat solutions for forcing javascript to use faux classes. Those solutions work, but they don’t really help to solidify straight prototype-based inheritance in my mind. Additionally, most solutions are relatively heavy and much more complex than what I need.

After a lot of trial and error, I came up with the following solution. I know it’s probably not the best way to define objects in Javascript, but it’s based on the coding style of the guys who worked on Squad before me, which is where I learned about prototypal OOP in the first place.

The magic happens with the following 2 lines of code which are inserted at the top of the child object’s constructor.

this._parent=new ParentObject();
for(var i in this._parent)if(!this[i]&&i!="_parent")this[i]=this._parent[i];

It basically creates a new parent object, then copies all of the parent object’s member functions and properties to the child object. It’s not strictly prototypal inheritance, but it does what I need it to do in my simple implementations. What follows is an example using your traditional animal metaphor:

//Parent object
Animal = function(){
this.weight = 100;
this.height = 15;
this.sound = "an Unknown Sound";
this.stride = 1;
};
Animal.prototype = {
move : function(distance){
alert("This animal moved "+(this.stride * distance)+" feet");
},
speak : function(){
alert("This animal says "+this.sound);
}
};

Monkey = function(){
//create a new instance of the parent object -- Animal
this._parent=new Animal();
//Copy all functions and properties from the new _parent object to the Monkey object
for(var i in this._parent)if(!this[i]&&i!="_parent")this[i]=this._parent[i];

this.sound = "Eek eek";
};
Monkey.prototype = {
climb : function(){
alert("The monkey climbed a tree.");
},
move : function()
{
alert("The monkey jumped to a different branch.");
}
};

var someAnimal = new Animal();
someAnimal.speak(); //Alerts "This animal says an Unknown Sound"
someAnimal.move(12); //Alerts "This animal moved 12 feet"
alert(someAnimal.weight); //Alerts "100"

var bobo = new Monkey();
bobo.speak(); //Alerts "This animal says Eek eek"
bobo.move(12); //Alerts "The monkey jumped to a different branch."
bobo.climb(); //Alerts "The monkey climbed a tree."
alert(bobo.weight); //Alerts "100"

Caveats:

While this method mimics inheritence, it doesn’t actually copy the prototype from the parent object to the child object. It only copies the functions and properties. In my case, this is usually all I need it to do. It essentially “fills in the blanks” of the child object using whatever is in the parent object. Also note that changing a property’s value in the child instance will not change it in the parent’s instance:

bobo.weight = 200;
alert(bobo.weight); //200
alert(bobo._parent.weight); //100

The same is true within the context of a member function:

Monkey.prototype.changeWeight = function(weight){
this.weight = weight;
}
...
bobo.changeWeight(200);
alert(bobo.weight); //200
alert(bobo._parent.weight); //100

In the vast majority of cases, you won’t need to access the _parent property. Any functions copied from the parent to the child will automatically gain the context of the child. In our example, the `this` in the speak function becomes bobo automatically, even though the function has been copied from Animal. If you did, however, want to call the parent’s version of a function within an overwritten function, you’d need to change context with something like call() or apply(). Without apply:

Monkey.prototype.move = function(distance){
alert("The monkey jumped to a different branch!");
this._parent.move(distance);
}
...
bobo.stride = 3;
bobo.move(12); //Alerts "The monkey jumped to a different branch!" then also alerts "This animal moved 12 feet"

Then with apply:

Monkey.prototype.move = function(distance){
alert("The monkey jumped to a different branch!");
this._parent.move.apply(this, arguments);
}
...
bobo.stride = 3;
bobo.move(12); //Alerts "The monkey jumped to a different branch!" then also alerts "This animal moved 36 feet"

Note that without apply, the animal moves only 12 feet because the _parent’s stride is still only 1, even though we changed bobo’s stride to 3. With apply, however, the animal moves 36 feet because the function is using bobo’s stride length of 3 instead of _parent’s.
The last problem I’ve come across deals with binding events and has to do with context, much like the last issue. Sometimes I’ll have a dynamically created DOM Element as a property of my object. If I bind an event listener to that object in the parent, the child object’s version will also have that listener, except the context of that function will be the _parent, even though the element is in the child. The following example uses jquery for event binding

Parent = function(){
this.button = document.createElement("button");
this.message = "I am the parent";
$(this.button).click(function(){ alert(this.message)});
}

Child = function(){
this._parent=new Parent();
for(var i in this._parent)if(!this[i]&&i!="_parent")this[i]=this._parent[i];

this.message = "I am the child";
}

childObject = new Child();
$(child.button).click(); //alerts "I am the parent";

I haven’t found a good solution for this problem yet. My workaround in the one case I’ve had this problem is to set a flag that tells the parent not to bind the event if it’s being extended:

Parent = function(inherits){
this.button = document.createElement("button");
this.message = "I am the parent";
if(!inherits)
$(this.button).click(function(){ alert(this.message)});
}

Child = function(){
this._parent=new Parent(true);
for(var i in this._parent)if(!this[i]&&i!="_parent")this[i]=this._parent[i];

this.message = "I am the child";
$(this.button).click(function(){ alert(this.message)});
}

childObject = new Child();
$(child.button).click(); //alerts "I am the child";

Not the most elegant of solutions, but it works.

Conclusion:
This method works great for me. It’s relatively simple and light weight. Depending on your application, you might want a more substantial solution, or better yet, learn how inheritance actually works in Javascript.

Mentorship: A Match Made in Coding Heaven

In the hustle and bustle of your job (or trying to find a job!) it may be easy to overlook the value of mentorship, but we’re here to remind you today about the impact great mentors can have. We’ve all had a mentor in our lives, whether or not we recognized it at the time. Entrepreneurs are almost obsessive about having mentors, and chances are you can identify someone in your life who helped show you the ropes when you started some new endeavor. Mentors are people we can talk with, seek advice from, and hopefully form very strong bonds with.

Continue reading

The Coversationalist Contest: What Is It, and What Does It Aim to Do?

If you caught last week’s blog post or follow us on Twitter, you’ve heard all about our Codeversationalist Contest by now. But for those of you who haven’t, along with those who still aren’t sure what exactly the contest is all about, we wanted to bring you another post further detailing this effort and what we aim to accomplish.

Continue reading

Nominate Your Favorite “Codeversationalist!”

We’re excited to announce our first-ever Creative Codeversationalist Contest! The contest will kick off today, Tuesday, March 26. What is a “codeversationalist,” you might ask? Easy! It’s someone who engages in conversation about coding. We’re looking for the best codeversationalists—those bloggers, reporters, and student bloggers who are your leading sources of knowledge about coding.

Continue reading

Verge Bloomington at the Root Cellar, March 14

I attended my first Verge Bloomington event last night at the Root Cellar in downtown Bloomington. It was exciting to be in a room with a bunch of motivated and interested startup enthusiasts! Verge Bloomington has been meeting monthly since October, and every meeting involves two five minute pitches from local startups followed by a longer-form “fireside chat”—sort of an informal keynote. At this month’s meeting, I spoke about Treaty for five minutes, followed by Tony Schy from Jeffersonville accelerator Velocity, and a very informative fireside chat with Bloomington attorney D. Mike Allen. Continue reading

Treaty is Now Generally Available!

See what’s changed in the past few weeks!

It’s a big day for the Code Together team as our second product, Treaty, is now generally available and ready for its big debut. Treaty is a real-time, collaborative document editor that integrates with existing web applications, allowing multiple users to work together in editing and exchanging documents without ever needing to leave a company website. Treaty was designed with corporate intranets, project management applications, and eLearning applications in mind.

Continue reading

TinyMCE and cursor position

Our latest product, Treaty, is built around the web-based rich text editor TinyMCE.  We chose TinyMCE as the editor because it seemed to have the most robust API.

Due to the nature of the product, one main function we needed was the ability to set the position of the caret or cursor in the editor.  Unfortunately, there is no easily accessible method of setting or getting the position of the cursor.  After countless hours of researching on the web and combing through the documentation, I was unable to find a suitable, reliable, cross browser method. Continue reading

The Momentum Continues—Announcing Treaty

The Squad team is off to a busy start in 2013 as we announced our latest product last week, Treaty. So what is it? Treaty is a real-time collaborative text and document editor that makes it easy to add document collaboration to existing web applications. Kira Newman of Tech Cocktail did a great job of evaluating the new solution in her article last week.

“Google Docs is probably the go-to destination for document sharing right now. But for app developers, it’s not ideal: users have to leave your application to work on their files, and then start sharing URLs. Instead, Treaty would keep users on your site, in a document editor with your own branding.”

To expand on Kira’s thoughts, Treaty does resemble Google Docs in some ways but is also very different. First, since it integrates directly with our customers’ web applications, so that the application’s users don’t have to leave to work on their documents. This is a big deal in terms of customer retention, because you really want to keep your customers on your site for as long as possible. In addition, for an end-user to use Google Docs, he (obviously) must first have a Google account (which may be rather ubiquitous but not entirely universal) and must then upload his documents to Google Drive before he can edit them with Google Docs. Documents simply uploaded to the web application generally can’t be opened with Google Docs. With Treaty, end-users can upload documents directly to the web application, and then edit them right there. 

We’re still in beta mode right now but have seen some great results so far. We’ve rolled out the tool to a number of testers and we (along with the testers) are happy with what we’re seeing so far. Ben, our resident developer extraordinaire, has been plugging away to get Treaty ready for full launch later this month. Check out some of the updates he made just this week:

  • Implementation Guide: This page provides all the implementation documentation needed to get started with Treaty. It gives implementation instructions for users who will be including Treaty in their existing applications, as well as some more general information about the available customizations and the API’s capabilities.
  • Examples and Tutorials: This page is fairly technical but a great tool for devs looking to implement Treaty. If offers examples of how Treaty can be used and customized.


We will be sure to continue with the updates as Treaty comes along both via the blog and our newly formed Treaty Twitter handle. In the meantime, check it out and tell us what you think by dropping a line in the comments section below.