For an front end programming language like JavaScript, if we want to understand its OOP feature, we need to understand its objects, prototype chain, execution context, closure and this keyword in deep. If you have a good understanding on these concepts, you should be confident that you can handle this language well.
The inheritance in JavaScript is not class inheritance like Java, but it adopts another mechanism-- prototype inheritance. The key to prototype inheritance is the prototype chain mechanism which realizes one of the most important feature of OOP--inheritance.In this article, we will focus on the prototype chain.
First, let's understand some concepts:
- The instance of any object in JavaScript are consisting of many properties, among these properties, there is one internal and invisible property called __proto__.This property points to the prototype of the object instance, each object has only one prototype.
- Function is actually an object constructor. And only functions have prototype property. Object instance doesn't have this property, it only has one inaccessible __proto__ property.
- Prototype is itself an object and it has its own properties and methods.Object.prototype is the most top prototype of all prototypes.
- Prototype of an object instance is an instance of Object constructor by default except the instance is a custom object created by developers and a customized prototype created for the custom object constructor.
- Prototype chain is series of prototype objects connected from bottom up..The main purpose is to realize the share and inheritance of properties. The top prototype in the prototype chain is null which indicates the end of the prototype chain.
- When accessing one property, if it doesn't exist on the object, then the prototype will be searched and if it still doesn't exist, then the prototype of the prototype will be searched until the top prototype is reached. if it still cannot be found, then an undefined will be returned.
- When adding one property to an object, even if the object's prototype contains this property, one new property with te same name will be added to the object.
- The truth is JavaScript maintains two prototype chains, one is to connect the object instances, this chain is invisible and inaccessible; the other chain is to connect constructors, it can be accessed through prototype property.
Starting from an object
We can create an object instance without any self defined properties with following codes:
console.dir(obj);
On above codes, we first initialize an empty object and we can print it using console.dir in Firefox.
We can see there is no property in this object. But is there really no property in the object? Lets try in Firefox:
|
1
|
console.log(obj.constructor);
|
Just like the output in the console, the newly created obj instance has a property constructor which points to Object.If obj is an empty object instance, then where is the constructor property from?In fact, this property exists in the prototype of this object, when we try to access obj.constructor, the JavaScript engine will first check whether the obj instance has property constructor, if it cannot find this property, it will go to check the prototype of the obj instance until it reaches the Object.prototype.
In this example, obj's prototype is Object.prototype, since constructor points to the constructor function which creates the obj instance, it is Object. Because JavaScript engine cannot find constructor property in obj instance, so it goes to Object.property and it finds the constructor property which has the value of Object.
Since obj doesn't have any properties, then how does the JavaScript engine know the prototype of obj instance? The answer is although there no visible properties in obj, there is one invisible property in obj which is __proto__.This property points to Object.prototype.This property is inaccessible, but it can be outputted in Firefox console.
|
1
2 3 |
var obj = {};
console.log(obj.__proto__); |
Next, let's verify the object pointed by __proto__ property has a property constructor and it has a value of Object.
|
1
2 3 |
var obj = {};
console.dir(obj.__proto__); |
As we expected, obj.__proto__ has a constructor property and it's pointing to Object constructor.If obj.__proto__ and Object.prototype point to the same prototype object of Object, then we should be able to print the properties of obj's prototype with following codes:
|
1
2 |
console.dir(Object.prototype);
javascript> |
The output are the same. So when creating the empty object, it actually has two steps:
- Construct an object with the Object constructor.
- Set the __proto__ property of the object, the value is Object.prototype.
Source : http://www.360weboy.com/frontdev/javascript/javascript_prototyp.html
