My Profile Photo

Tyler Hughes


Developer, sailor, and nature enthusiast


Object Oriented JavaScript for C# Developers - Part One

A few months ago, while talking to Sayed Hashimi from Microsoft about my future as a developer, he recommended that one of the best things I can do would be to setup a blog. In order to get started, he recommended that I check out Miniblog. It’s a blogging engine developed by Mads Kristensen. If you haven’t heard of Miniblog it is a minimalistic blogging engine developed using ASP.NET. In order to have a WYSIYWG editor for Miniblog, Mads used the bootstrap-wysiwyg project. Being somewhat new to the web development world, one of my goals was to learn more about WYSIWYG editors and how they work so that I might someday be able to do some freelance work building websites for companies. So I took this opportunity and started digging through the project’s source code.

In the time since I began learning about the project I’ve fixed several bugs, updated the UI to showcase more features, updated the website documentation, and even added a working example to the website. This was only a small part of the contribution I’ve made to the project. Steve King, the project’s maintainer shared with me one evening his plan to eventually expand the project so that it includes a plugin system. This way developers can get the core functionality from bootstrap-wysiwyg project and then get any additional features by adding only the plugins they need. Having dealt with most of the bugs of late, I knew that before we could ever add a plugin system we first needed to start unit testing make sure the project was completely stable. To do that we needed unit tests, which in turn meant that our project would need to be object oriented. So I set out to learn how to write object oriented JavaScript. Coming from a class-based languaged this was more of a challenge than I expected.

What I’ve Learned So Far

If you’re like me and come from a class-based language then you’re probably used to having public and private methods and variables. Being a prototype based language you still have these in JavaScript, they just don’t work the same way you’re used to. You may be thinking “How can they be different? Public is still public right?” Well let’s take a look at a few examples and see how things are different. For each example I’ll start by writing the snippet in C# then will write the same snippet in JavaScript. Following the two code snippets we’ll analyze them and talk about what makes them different.

Note: I’m not going to go through and explain prototype inheritance, because there are people out there who can explain it much better than I can. If you’re interested in learning more about prototype inheritance here a few resources that I recommend:

  1. Prototypes in JavaScript by funfunfunction
  2. A Plain English Guide to JavaScript Prototypes
  3. Understanding “Prototypes” in JavaScript
  4. JavaScript Prototype in Plain Language

C#


    public class Animal {

        public Animal() {
        }

        public void eat() {
            // do something
        }

        public void sleep() {
            // do something
        }
    }

    Animal dog = new Animal();
    dog.eat();
    dog.sleep();

JavaScript


    function Animal() {
    }

    // public method
    Animal.prototype.eat = function() {
        // do something
    };

    // public method
    Animal.prototype.sleep = function() {
        // do something
    };

    var dog = new Animal();
    dog.eat();
    dog.sleep();

As you can see from the C# snippet we have a class called Animal and two public methods, eat and sleep. In the JavaScript snippet we just have three functions and you may be wondering how this is the equivalent to the class we saw before. Well as I was stating before JavaScript is not a traditional class based language, it follows a prototype approach to object oriented programming. That’s why you see the keyword prototype when creating these public functions. We have Animal as our class name and then we have eat and sleep are out method names. By putting eat and sleep on the prototype for the Animal class we make these methods accessible to any instance of the Animal class.

Now like everything in programming there’s always more than one way to do something. Next time we’ll expand on what we’ve learned today by looking at an example containing both public and private methods.

comments powered by Disqus