Object-oriented programming with JavaScript
So, here’s how to easily create your own prototype-based classes in JavaScript. Seems confusing to lots of folks, and there are multiple ways to do it. If you use CoffeeScript, you can write your classes in a more traditional OO style. However, it’s really not too complicated in plain JavaScript.
Step One: Write Your Constructor
A common convention is to capitalize variables that refer to classes that need to be instantiated with the “new” keyword.
var MyClass,
instance;
MyClass = function () {
// This is the constructor - do any initialization here!
// "this" refers to the current instance of the class
this.instanceVariable = 42;
};
instance = new MyClass();
console.log(instance.instanceVariable); // 42
Step Two: Write Instance Methods
Available to all instances of the class, even ones created before the method was written!
MyClass.prototype.instanceMethod = function (argument) {
// "this" refers to the class instance
this.instanceVariable = argument;
};
instance.instanceMethod("Wut?");
console.log(instance.instanceVariable); // "Wut?"
Step Two ½: Wrong Way to Write Instance Methods
It can be tempting to write instance methods inside your constructor function, perhaps for style/organizational purposes. However, it’s inefficient to do so, because each method is created every time you create an instance of your class.
// Wrong!
var MyClass = function () {
this.instanceMethod = function (argument) {
// "this" refers to the class instance
this.instanceVariable = argument;
};
};
Step Three: Write Static Class Methods
These methods can be used without creating an instance of the class. For
example, if you’ve ever used the Math object, you’ve used a static
method (for example, Math.cos(Math.PI)).
MyClass.staticMethod = function (argument) {
var results = "Hello " + argument;
console.log(results);
};
MyClass.staticMethod("World"); // "Hello World"
Step Four: Inheritance
Say I want to create a subclass of the MyClass class. This part is
a bit awkward, but doable.
var otherInstance,
MyOtherClass;
MyOtherClass = function (argument) {
MyClass.call(this); // Invokes MyClass's constructor
this.otherInstanceVariable = argument;
};
// Set up prototype (inheritance) chain
MyOtherClass.prototype = new MyClass();
// Instantiate new object
otherInstance = new MyOtherClass("What?");
console.log(otherInstance.instanceVariable); // 42 (inherited from MyClass)
console.log(otherInstance.otherInstanceVariable); // "What?"
otherInstance.instanceMethod("Wut?"); // (inherited from MyClass)
console.log(otherInstance.instanceVariable); // "Wut?"
// Extend the "instanceMethod" method
MyOtherClass.prototype.instanceMethod = function (argument) {
MyClass.prototype.instanceMethod.call(this, argument); // Equivalent of calling "super"
};
Hope that helps get you started. JavaScript is really not a bad little language once you get the hang of it. The fact that it can be run in any browser and accessed with interactive developer consoles makes it an easy language to learn and play around with. It’s also by far the language du jour on the internets, so learning it could have a beneficial effect for your job opportunities!
Comments