Have you ever played a videogame on the JavaScript console? No? Well, keep reading!
I’m a huge OOP fan, and I love how OOP could potentially represent any kind of real life object. For example, let’s say we want to depict an animal. It’d be a cat, a dog, an alligator, etc..
The first attribute that comes to my mind is wildness. Cats and dogs are usually domestic, while alligators aren’t. So, our Animal object should have a boolean property called isWild.
function Animal() {
this.isWild = true;
}
Thinking more deeply, an animal can have a lot of properties, like name, age, weight… and so on.
function Animal() {
/* properties */
this.isWild = true;
this.name = '';
this.sound = '';
this.height = 0; // cm
this.weight = 0; // kg
this.speed = 0; // km/h
this.age = 0; // years old
}
But a real life animal can also do things like eating, running, crying… so let’s add some cool methods to our brand new class:
function Animal() {
/* properties */
/* methods */
this.cry = function() {
console.log(this.name + ' says: ' + this.sound + '!');
}
this.run = function() {
console.log(this.name + ' is running at ' + this.speed + 'km/h!');
}
this.eat = function() {
console.log(this.name + ' is eating!');
}
}
The methods declared above are the simplest we could implement, but what if we want to be as close as possible to real life?
An animal could be carnivorous, erbivorous, or even omnivorous. We could implement these as animals’ attributes, but I prefer a slightly different solution: I’d set a property called eats, that is an array defining all foods that our animal can actually eat. Foods are just strings.
function Animal() {
/* properties */
this.eats = []; // an empty array
/* methods */
this.eat = function(food) {
if (food) {
if ( inArray(food, this.eats) ) {
console.log(this.name + ' eats some ' + food + '!');
return true;
} else {
console.log(this.name + ' can\'t eat ' + food + '!');
return false;
}
} else {
console.log('You should have something edible.');
return false;
}
}
}
Straightforward, isn’t it? We can now create as many Animal instances as we want!
var aKitten = new Animal,
anotherKitten = new Animal,
aDog = new Animal;
But hey, these are just generic Animal instances… what if we want to create a Cat instance, or a Dog instance?
Simple! Let’s extend the Animal class!
Unfortunately there’s no built-in concept of inheritance in JavaScript. If you are looking for better solutions on how to simulate inheritance, I’ll suggest you reading this nice article by John Resig. In my example we’ll simulate the same behaviour by declaring new classes (that are, in fact, just functions):
function Cat(){
this.inheritFrom = Animal;
this.inheritFrom();
}
function Dog(){
this.inheritFrom = Animal;
this.inheritFrom();
}
And now, let’s have fun with the console!
If you don’t know how to open the JavaScript console in your browser, read here.
var cat = new Cat;
>>> undefined
cat.name = "Kitty";
>>> "Kitty"
cat.sound = "Meeow";
>>> "Meeow"
cat.eats = ["meat", "fishbones"];
>>> ["meat", "fishbones"]
cat.eat("fishbones");
Kitty eats some fishbones!
>>> true
cat.eat("a pair of shoes");
Kitty can''t eat a pair of shoes!
>>> false
cat.cry();
Kitty says: Meeow!
>>> undefined
var dog = new Dog();
>>> undefined
dog.name = "Doggy";
>>> "Doggy"
dog.sound = "Woof";
>>> "Woof"
dog.cry();
Doggy says: Woof!
>>> undefined
dog.speed = 60;
>>> 60
dog.run();
Doggy is running at 60km/h!
>>> undefined
One day I should create an entire videogame with JavaScript… would be a lot of fun!