Yeah I know, it’s a weird title. But it turns out that the X-Men are an awesome way of explaining some more advanced concepts in Javascript. Don’t believe me? Let’s try it out:

function Mutant(){}

Let’s start with a Mutant base class.

The proper JS term here is actually “constructor”, but since we’ll be using Mutant in exactly the same way you’d use something like a PHP class and also because it’s confusing to use “function” or “constructor” in a tutorial context, I’m labelling it a class.

Whether you’re an X-Man or one of Magneto’s Brotherhood, you’ll still be a mutant right? And all mutants share some things in common:

function Mutant(){
   this.name;
   this.powers;
   this.health = 100;
}

So any mutants we make, good or evil, from here on out will have a name, powers and full health. Sweet!

A Fork in the Road

Here’s where things split. Some mutants will join Xavier’s school and others will join Magneto’s cause! So let’s create a class for each of these as well:

function XMan(){}
function BrotherhoodMutant(){}

Awesome. Lines have been drawn and stages set! Now we need everything we laid out in Mutant to be inherited by the X-Men and the Brotherhood. So it’s time to dive into prototypical inheritance:

XMan.prototype = new Mutant();
BrotherhoodMutant.prototype = new Mutant();

By declaring each faction’s prototype as a new instance of Mutant we inherit everything that ever has been or will be added to our Mutant class. This is za best way to go about inheritance with prototypes if you’re intending to use an “extends” type of approach to classes in Javascript. Hell, it’s za best way period.

This means that an XMan and a BrotherhoodMutant also have a name, powers, and 100 health, since it’s inherited from Mutant. So let’s make some characters.

The Best At What He Does

Let’s start with everyone’s favourite almost-pint-size bad-ass: Wolverine!

var Wolverine = new XMan();

Now we’re inheriting from XMan instead of directly from Mutant. However, because XMan itself inherits from Mutant, our Wolverine also has a name, powers and 100 health. Also, note that Wolverine is an object here, not a function/class.

His name and powers aren’t set though, so let’s set them now, starting with his name:

Wolverine.name = "James Howlett";

Powers are somewhat different. We know that all mutants have powers, but their powers often only manifest at adolescence, so let’s create a base method to manifest them ourselves:

Mutant.prototype.manifestPowers = function(){
   this.powers = arguments;
}

Because all mutants will have powers, we declare this method as one of Mutant’s. You’ll notice we also made it a prototype method, which just means it’s set as a freely available method for all instances of Mutant’s prototypes. And because our XMan and BrotherhoodMutant are new instances of Mutant, they’ll get the ability to manifestPowers too!

Another thing to note here is that I’m using “arguments” in the body of the method. For those that don’t know, “arguments” is kind of a reserved keyword for any arguments passed into the method when we call it.

We use it because it tells JS: “Listen here, I don’t know how many arguments are going to be put into this function, but however many there are just shove them in”. This is useful, because some mutants have more powers than others and we need to store them all.

Wolverine is a perfect example of this, because he has three main powers:

Wolverine.manifestPowers("healing", "claws", "senses");

This is in contrast to someone like Cyclops, who only has the cool, but limited ability to shoot laser beams out of his eyes:

var Cyclops = new XMan();
Cyclops.manifestPowers("eye beams");

Now, even though Cyclops only has one power and Wolverine has three, both of them will have the right values in their “powers” property if we call them.

To Be Continued

In the next section, we’ll look at using Javascript functions like “apply” and “call” to give our mutants the power to attack, Wolverine the ability to heal himself, and a bunch of other cool things.

Til then, excelsior!