Let’s first start by saying that Javascript is a little interesting when it comes to classes and objects. Technically I think Javascript is basically classless (probably why I like it so much…) but there are class-like activities. Just remember at its root, an Object is a just a unordered collection of key:value pairs. Anything other than strings, numbers, booleans, undefined and null is an object.
Let’s create some objects.
var anObject = {}; anotherObject = new Object();
-or-
function MyObject() {} var myObject = new MyObject();
Now where does Prototypal Inheritance enter into this? Each object has an internal link to another object, known as its prototype. This other object also has a prototype, and so on until we reach null as its prototype.null ending the chain.
Objects are buckets of properties with links to a prototype object. When access to a property is requested it will look not only at the specific objects property but all the way back up the prototype chain until the property is found or the end of the chain.
Let’s add some methods to the objects.
function MyObject() {} var myObject = new MyObject(); MyObject.simpleLog = function(value) { console.log(value); } var difObject = new MyObject(); difObject.simpleLog = function(value){ console.log('The value is: ', value); } difObject.simpleLog("something should go here"); //calls the instance specific method MyObject.simpleLog("something should go here"); //calls the static Object method MyObject.prototype.simpleLog = MyObject.simpleLog; //apply the static method to all instances from here on in difObject.simpleLog("still calling instance method"); //still calls the instance method var yetAnotherObject = new MyObject(); yetAnotherObject.simpleLog("inherited from MyObject"); //inherited simpleLog() from MyObject MyObject.simpleLog("I also inherit."); //pre-existing instances also inherit the new function
So as you can see when you add a method to the prototype it gets inherited along the prototype chain. There is an order to when this gets used as you can see in the difObject.simpleLog(); call that it uses the local instance method as it does not have to go up the chain to find the one we added with the line MyObject.prototype.simpleLog = MyObject.simpleLog;
Now when we reference methods in JavaScript it is not strictly accurate in the form that other class-based languages. For JavaScript any function that you add as an object property becomes a method for that object. An inherited function acts just as any other property on that object, including method overriding!
Another key point to remember is what happens to this. Its value points to the inheriting object not back to the prototype object where the function is an own property. Let’s look at another example.
var myObject = { staticValue: 40, someMethod: function(val) { console.log(this.staticValue); return this.staticValue + 1; } }; console.log(myObject.someMethod()); //42 var yourObject = Object.create(myObject); yourObject.staticValue = 20; console.log(yourObject.someMethod()); //21
As you can see once we overwrite a value it will no longer work its way up the chain allowing for differences in the objects after they are created. Very useful! I will be digging deeper into objects and modules in another post.
JS and John 