Coming from a regular background, you’re probably introduced into inheritance in a classical way with C++ or Java. JavaScript does not have any native mechanism to provide inheritance in the terms of what you’ve known already. JavaScript is a prototype based language. Behaviors of classes can be ported to other classes in a prototype based methodology. In this article, I’ll underline this concept and will illustrate you how it works.
So, what is Object.prototype?
You should be familiar with Object.prototype at least you have a little dirty object oriented JS experience. If you dont, let me explain you in a few words. In order to bind methods to a type, you extend your type’s prototype. For instance, let us assume we need a Student type, who can enroll to and withdraw classes.
var Student = function(){};
Student.prototype.enroll = function(classes){
// code here
}
Student.prototype.withdraw = function(classes){
// code here
}
So, Student’s prototype is referencing to an object which has two functions, enroll and withdraw. Similarly you could have written the same as:
var Student = function(){};
var methods = {
enroll: function(classes){ /* code here */ },
withdraw: function(classes){ /* code here */ }
}
Student.prototype = methods;
Great, now it’s time to explain you what prototype object is doing. Whenever you are constructing an instance of Student type, it appends enroll and withdraw functions to the created object. In short,
var student = new Student();student object can call student.enroll([4, 5]); and student.withdraw([5]); in order to enroll to classes which are identified with 4 and 5. And withdraw the class identified with 5. Student class will be extended before Student.constructor is called so, you can use enroll and withdraw right inside of the constructor if needed. Visually the memory looks like:
So if you make a change to Student.prototype after student is created, changes will affect the student instance.
You started to be fascinated, arent you? But we’re just beginning. We’ll take a look how we’re using prototypes to share common behavior among classes. Assume we need another class called PartTimeStudent that inherits Student. To transfer all of the capabilities of the Student, we can set PartTimeStudent’s prototype to a Student object.
var PartTimeStudent = function(){}
PartTimeStudent.prototype = new Student();
PartTimeStudent.prototype.constructor = PartTimeStudent;
By setting the prototype to a Student object that’s being initialized by new Student() line, you also transferred the PartTimeStudent’s constructor to the Student’s. Last line resets the constructor to the right one.
And finally you can continue to extend PartTimeStudent by adding more methods to its prototype.
PartTimeStudent.prototype.other = function(){/* code here */}
Anytime you ask for enroll() from a PartTimeStudent, firstly PartTimeStudent will be searched if it has its own property called as enroll. After no result is found, object’s prototype is being searched. This chain goes until a match is found. If there are no matches, there will be an error to output. Prototype chaining is usually a very costly operation and as you change the deeper definitions such as Object.prototype, it’s becoming a performance bottleneck. That’s the main reason behind the common advices that tell you not to extend Object.prototype directly. And as far as I can understand, if you don’t extend Object.prototype (or any of the existing classes), JS engine uses the natively implemented Object internally which is expected to run . If you make changes, standard implementation cannot be used and extra memory will be consumed to keep the definitions.
This was a quick intro for prototype based inheritance. Part II will cover more existing issues.
I became a huge addict! I’m planning a minor update with some useful features and fix some of the usability problems. If you have any feedback, please drop it here.
I'm not bionic. I make software. I love programming, I'm super passionate about open web standards. And I'm a Mac.
