This article focuses on talking about the inheritance in JavaScript objects, object-oriented programming which is a very important aspect. A object inherits from the object B, object B can directly have all the properties and methods, it is to avoid the reuse of code, code size savings.
The most object-oriented programming language, is through inheritance "class" (class) to achieve the object. Traditionally, the JavaScript language is not inherited by the class (ES6 introduction of grammar class, class-based inheritance are not presented here), but through the "prototype object" ( ) prototypeimplementation, therefore, here to "inherit" the focus out is concerned, it is In order to reflect this difference.
Review prototype / prototype chain
JavaScript must rely on inheritance prototype / prototype chain to achieve, of course, the focus of the article before the prototype / prototype chain is not of this article has also been introduced, so here we review what can be.
In fact, the prototype concept is very simple, I think the following can be summarized in a few brief words full of:
- All objects have a property
__proto__to an object, which is the prototype - Prototype of each object can
constructoralso be found by the constructor, the constructorprototypefind prototypes - All functions can by
__proto__foundFunctionobjects - All objects can
__proto__be foundObjectobjects - Between objects through
__proto__linking, so called prototype chain. Does not currently exist on the properties of the object can look up the prototype chain layers, the top layer untilObjectthe object, the top-levelObjectobject is the final pointnull
I think the most important elements of the prototype fact, that's all, no need to look too much articles about the prototype, but will end up getting confused, if you insist, then recommend prototype refer to the information, "JavaScript Advanced Programming" book, well-deserved!
inherit
Through the above description, we know that in JavaScript inheritance is through the prototype / prototype chain to reflect, and look at a few lines of code:
function Foo() { }
var f1 = new Foo();
f1.a = 10;
Foo.prototype.a = 100;
Foo.prototype.b = 200;
console.log(f1.a); // 10
console.log(f1.b); // 200
console.log(f1.c); // undefined
复制代码The above code, f1is a Foofunction by newthe object is constructed, f1.ait is f1a basic attribute of the object, and f1.bfrom the Foo.prototypeobtained inheritance, since f1.__proto__points to Foo.prototype.
There is an important rule: When accessing the properties of an object, first look at the basic attributes, and if not, then along __proto__up to find this chain to see if in the chain, some words can inherit this property If not, return undefined, this is the prototype chain , and review again slightly.
Figure intuitive number, here is employed repeatedly with prototype / Classic FIG prototype chain:
The figure above, access f1.atime, f1the basic properties there a, we will not continue along __proto__looking directly reading out the basic attribute avalue; and access f1.b, the f1basic properties does not b, then along __proto__to find Foo.prototype.b.
How do we distinguish in the practical application of a property in the end is the basic property or in the prototype chain of public property it? Here you can take advantage of what this property - , hasOwnPropertyit will be able to detect who is a basic property, when in for…in…circulation, need extra attention.
hasOwnProperty()Method returns a Boolean value that indicates whether the attribute of the object itself having specified attributes, the figure above, the right to print out only aa value, as bis Foo.prototypethe, not their properties.
That f1this hasOwnProperty()method f1is not itself, Foo.prototypeit is also not, but also come from?
Or reference prototype goes / classic FIG prototype chain, from the map view, hasOwnProperty()is the Object.prototypesuccession come:
So the prototype chain of the object is along __proto__this line to go, so look for f1.hasOwnPropertywhen property, because the property itself is not, would have been along the prototype chain to find Object.prototypethe attributes that have, if not found returns undefined.
Since all of the object's prototype chain will eventually be found Object.prototype, so all objects will have Object.prototypein the way, for example toString, valueOfand other such public property, which is called "inheritance."
Of course, this is just an example, you can customize the functions and objects to achieve your inheritance, this article will be devoted to the follow-up.
An example of a function here to say to a deeper understanding of it.
We all know each function apply, callmethod, are length, arguments, callerand other attributes. Why each function? This is definitely a "succession" to the. In introducing instanceofthe article also mentioned, the function is Functionto create a function, are inherited from the Function.prototypemethod. Do not believe can be printed in Chrome:
Direct can see, there call, lengthand so these properties.
How it still hasOwnPropertydoes? The above figure hasOwnPropertyshown on the right Object, on behalf Function.prototypeinherited from Object.prototype. There are questions you can look at this prototype / prototype chain Jingdiantaitu, Function.prototype.__proto__will point Object.prototype.
Finally then again, when you get to know exactly when the above picture, is when you master the prototype, the prototype chain.
If you think the article to help you slightly, welcome in my GitHub blog points praise and attention, very grateful!