Javascript Pseudo-classical Instantiation
Javascript has multiple instantiation methods that you can use: functional, functional-shared, prototypal, and pseudo-classical, and others. This post will address how to Javascript's most popular style: pseudo-classical. The pseudo-classical pattern creates methods directly on its prototype object, instead of creating a new object and returning it. Let's create a class called "Human", and give it the properties of name, age, and height. Notice that the "H" in "Human" is capitalized to follow the naming conventions of creating a class.
var Human = function(name, age, height){ this.name = name; this.age = age; this.height = height; }
All the properties are now in the Human class, great! Now let's make some methods. The thing that makes pseudo-classical instantiation stand out from the others is that you create the methods on the Human function's prototype object. Everything in Javascript is an object, including functions, and all objects in Javascript have a prototype object. That's why the Human function/class has a prototype object. You might be wondering: what IS a prototype object? Think of the prototype object as a utility belt that every object wears. All Javascript object inherit their properties and methods from their prototype. Everytime you add something to the prototype object, you are adding something to that utility belt. For example, if I wanted to add a method to the Array prototype, I could add something like this:
Array.prototype.getSecondElement = function(){ return this[1]; } var arr = [1,3,5]; arr.getSecondElement(); //returns 3
Because I added the getSecondElement method to the Array object's utility belt, all arrays can now use that method. pseudo-classical instantiation takes advantage of this by adding methods to its class's prototype. Let's go back to our Human class, and add some methods.
var Human = function(name, age, height){ this.name = name; this.age = age; this.height = height; } Human.prototype.sayHello = function(){ return "Hello my name is " + this.name; } Human.prototype.sayHeightAndAge = function(){ return "I am " + this.height + " feet tall and I am " + this.age + " years old." }
Now we can create a new object using this Human factory class
var Human = function(name, age, height){ this.name = name; this.age = age; this.height = height; }; Human.prototype.sayHello = function(){ return "Hello my name is " + this.name; }; Human.prototype.sayHeightAndAge = function(){ return "I am " + this.height + " feet tall and I am " + this.age + " years old." }; var bob = new Human('Bob', "21", "6"); bob.name; //returns "Bob" bob.age; //returns "21" bob.height //returns "6" bob.sayHello(); //returns "Hello my name is Bob" bob.sayHeightAndAge(); //returns "I am 6 feet tall and I am 21 years old."
There you have it. Bob has now been given Human's utility belt which contains all of its methods and properties via pseudo-classical instantiation. To recap: you create properties in the class by using the this keyword, and you create its methods by adding to the prototype of that class. Stay tuned for pseudo-classical subclassing!