Using Prototypes in Javascript
As mentioned in my previous post, I think using prototypes is powerful enough to deserve a more detailed explanation. To start off, let me say we are talking about the prototype method here, not the JavaScript library.
Prototypes allow you to easily define methods to all instances of a particular object. The beauty is that the method is applied to the prototype, so it is only stored in the memory once, but every instance of the object has access to it. Let’s use the Pet object that we created in the previous post. In case you don’t remember it or didn’t read the article (please do) here is the object again:
- function Pet(name, species){
- this.name = name;
- this.species = species;
- }
- function view(){
- return this.name + " is a " + this.species + "!";
- }
- Pet.prototype.view = view;
- var pet1 = new Pet('Gabriella', 'Dog');
- alert(pet1.view()); //Outputs "Gabriella is a Dog!"
As you can see, by using simply using prototype when we attached the view method, we have ensured that all Pet objects have access to the view method. You can use the prototype method to create much more robust effects. For example, let’s say we want to have a Dog object. The Dog object should inherit each of the methods and properties utilized in the Pet object and we also want a special function that only our Dog objects have access to. Prototype makes this possible.
- function Pet(name, species){
- this.name = name;
- this.species = species;
- }
- function view(){
- return this.name + " is a " + this.species + "!";
- }
- Pet.prototype.view = view;
- function Dog(name){
- Pet.call(this, name, "dog");
- }
- Dog.prototype = new Pet();
- Dog.prototype.bark = function(){
- alert("Woof!");
- }
We set up the Dog object, and have it call the Pet function using the call() method. The call method allows us to call a specific target function within an object by passing in the object we want to run the function on (referenced by ‘this’ on line 10) followed by the arguments. Theoretically, we don’t need to do this. We could just create a ‘name’ and ‘species’ property inside of the Dog object instead of calling the Pet function. Our Dog object would still inherit from the Pet object because of line 12. However that would be a little redundant. Why recreate these properties when we already have access to identical properties inside of the Pet object?
Moving on, we then give Dog a custom method called bark that only Dog objects have access to. Keeping this in mind consider the following:
- var pet1 = new Pet('Trudy', 'Bird');
- var pet2 = new Dog('Gabriella');
- alert(pet2.view()); // Outputs "Gabriella is a Dog!"
- pet2.bark(); // Outputs "Woof!"
- pet1.bark(); // Error
As you can see, the Dog object has inherited the view method from the Pet object, and it has a custom bark method that only Dog objects have access to. Since pet1 is just a Pet, not a Dog, it doesn’t have a bark method and when we try to call it we get an error.
It is important to understand that prototype follows a chain. When we called pet2.view(), it first checked the Dog object (since that is the type of object pet2 is) to see if the Dog object has a view method. In this case it doesn’t, so it moves up a step. Dog inherits from Pet, so it next checks to see if the Pet object has a view method. It does, so that is what runs. The bottom most layer of inheritance is actually from the Object.prototype itself. Every object inherits from that. So, in theory we could do this:
- Object.prototype.whoAmI = function(){
- alert("I am an object!");
- }
- pet1.whoAmI(); //Outputs 'I am an object!'
- pet2.whoAmI(); //Outputs 'I am an object!'
Since all objects inherit from the Object.prototype, pet1 and pet2 both can run the whoAmI method. In short, prototype is an immensely powerful tool you can use in your coding. Once you understand how prototype inherits, and the chain of objects it inherits from, you can start to create some really advanced and powerful object combinations. Use the code examples used in this post to play around with and see the different ways you can use prototype to create more robust objects. With something like this, hands-on is definitely the best approach (at least I think so!).
14 Smart Things Were Said
Simple but great post. I like it
Good intro to prototypes. One thing I noticed that might leave the novice developer confused is the call() method. There is no mention of where the method is defined. This might be obvious to the more experienced developers, but the dumbed down explanation would surely help the beginners.
Other than that, great stuff. :)
Thanks for the input guys!
@Josh – Actually the call() method is a lesser known built-in method that has been included since Javascript 1.3. So actually, it’s been defined for us already. :) I did contemplate going into more detail on it, but I thought that for those just starting with this, it might be better to stick with a more narrow focus.
Thanks for the input guys!@Josh – Actually the call() method is a lesser known built-in method that has been included since Javascript 1.3. So actually, it’s been defined for us already. :) I did contemplate going into more detail on it, but I thought that for those just starting with this, it might be better to stick with a more narrow focus.
Simple but great post. I like it
Good intro to prototypes. One thing I noticed that might leave the novice developer confused is the call() method. There is no mention of where the method is defined. This might be obvious to the more experienced developers, but the dumbed down explanation would surely help the beginners.Other than that, great stuff. :)
Wow, this will be great for the next time I need to create a Dog or Pet object! Seriously though, programmers should use more meaningful examples. I only read this blog post because I recently found a String.prototype.trim function that is useful for trimming strings.
Wow, this will be great for the next time I need to create a Dog or Pet object! Seriously though, programmers should use more meaningful examples. I only read this blog post because I recently found a String.prototype.trim function that is useful for trimming strings.
So does this explain something that I’ve been seeing recently a lot and don’t understand:
var $get = Sys.UI.DomElement.getElementById = function Sys$UI$DomElement$getElementById(id, element) { ………
Firebug lists $get as a prototype, but I don’t understand what’s going on here.
So does this explain something that I’ve been seeing recently a lot and don’t understand:var $get = Sys.UI.DomElement.getElementById = function Sys$UI$DomElement$getElementById(id, element) { ………Firebug lists $get as a prototype, but I don’t understand what’s going on here.
@Adam – Actually, what you are showing there simply makes $get and Sys.UI.DomElement.getElementById call the same function. Correct me if I’m wrong, but I think that is from the ASP.NET AJAX Framework set up by Microsoft. I’m pretty sure that right in the framework, they offer $get as a shortcut for the otherwise long winded call.
@Adam – Actually, what you are showing there simply makes $get and Sys.UI.DomElement.getElementById call the same function. Correct me if I’m wrong, but I think that is from the ASP.NET AJAX Framework set up by Microsoft. I’m pretty sure that right in the framework, they offer $get as a shortcut for the otherwise long winded call.
Yeah, I think your right about that coming from the AJAX library, I’m trying to figure out more advanced javascript lately. Is there a convention about the ‘$’ character being used for variable. Sometimes the stupidest thing can hang you up when your unfamiliar with a language. I thought I used to know javascript pretty well, but now I realize people are taking it a lot farther.
BTW: Your site looks and works really great. What Blog software do you use? (you could email me that part :))
Yeah, I think your right about that coming from the AJAX library, I’m trying to figure out more advanced javascript lately. Is there a convention about the ‘$’ character being used for variable. Sometimes the stupidest thing can hang you up when your unfamiliar with a language. I thought I used to know javascript pretty well, but now I realize people are taking it a lot farther.BTW: Your site looks and works really great. What Blog software do you use? (you could email me that part :))