I bet you have seen the prototype keyword before. This prototype thing is very important to know and understand especially if you want to be an expert web developer. This article will explain you about it.
Let’s instantiate a new object. In order to do it we have to define function and then simply use the “new” keyword:
1 2 3 4 5 6 7
The baseObj() function is called Object Constructor since it creates and defines an object. Later we can call:
We will talk about this later.
1 2 3 4 5 6
1 2 3 4 5 6 7
This adds and initialize the color property to every present and future animal instances.
Similar to properties, we can add methods and reflects all the instances:
1 2 3 4
This functionality allows us to do very useful things like extending the behavior of an Array and add a method that gets an element and removes it from the array:
1 2 3 4 5 6 7 8
In this example I used the “this” keyword inside the method. Keep in mind that “this” refer to the object that calls the method. In this example when calling arr.remove(4), “this” refer to arr and therefore this.indexOf(elem) returns the index of elem in arr.
The Object Constructor Way
Besides the prototype approach, another way to define properties and methods is by doing it inside the object constructor:
1 2 3 4 5 6 7 8
This code results the same object structure as the prototype approach. Each instance of animal will have the color property and the run method.
The main advantage of this approach is that you can make a use of local variables defined inside the object constructor:
1 2 3 4 5 6 7 8 9 10 11
Those local variable “runAlready” is acting like private members of C# and JAVA. No one can access this variable except the object’s methods.
This approach might seem more readable and convenient but actually is not always recommended, especially when adding many methods. If you don’t need to use local variables defined inside the object constructor, then there is no reason to use this approach and using prototype is better. That is because if you are going to create lots of animals, a new set of methods will be created and held in different instances each time the animal constructor is called. In the prototype approach, all the instances will share one set of methods and therefore less memory.
You can also use combine approaches whereby methods that uses private local constructor variables will be defined inside the constructor while other methods will be added using the prototype:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
With this article we understood the meaning of prototype-based language, we saw how we can use the prototype property in order to add properties and methods to all instances of an object. We even saw a practical example of extending Array’s behavior! :) I demonstrated another way to add properties using the object constructor and explained its drawback.
If you wish to read more about the differences between class-based languages and prototype-based languages, dig in details about prototype and inheritance, I highly recommend to read Mozilla’s Details of the object model guide.
I really enjoyed writing this article and I hope you enjoyed even more to read it.