Introduction
Before learning JS in the prototype, the prototype chain to inherit this knowledge, we first learn the basics down: the relationship between functions and objects.
We always knew, but also a functional object, as can be judged by instanceof out. However, the relationship is not simple functions and objects contained and included relationship, the relationship between the two is still a little complicated. Then we have to stroke a stroke.
Firstly, the little objects are created by function
for following this type of code, commonly called "syntactic sugar"
var obj = {A: 10, B: 20 is }; var ARR = [. 5, 'X', to true ]; however, in fact, is the essence of the above code like the following: // var obj = {A: 10, B: 20 is}; // var ARR = [. 5, 'X', to true]; var obj = new new Object (); obj.a = 10 ; obj.b = 20 is ; var ARR = new new the Array (); ARR [ 0] =. 5 ; ARR [ . 1] = 'X' ; ARR [ 2] = to true ;
The Object and Array are functions that can authenticate yourself with typeof function.
So, it can be drawn: objects are created by function
Text
finished the preface, let's get to the point.
1. prototype prototype
in the preface, we say that the function is also a target, so the function is a collection of attributes, but can also be custom attributes to function.
Each function has a property --prototype. The property value of the prototype is an object (a collection of attributes), only a default property named constructor that points to the function itself. As shown below:
Figure above, is a function Supertype, block prototype is its right side.
Since the prototype as an object (a collection of properties), in addition to the constructor, you can also customize the number of attributes, such as the following example:
Of course, we can also increase our own properties in the prototype method of their own definition, such as the following this:
function Fn() { } Fn.prototype.name = '张三'; Fn.prototype.getAge = function () { return 12; };
So the question is: prototype function in the end what use is it?
Prior to solve this problem, we first look at the other people confused attributes: _proto_
2. "implicit prototype" proto
we look at a very common code:
function Fn() { } Fn.prototype.name = '张三'; Fn.prototype.getAge = function () { return 12; }; var fn = new Fn(); console.log(fn.name); console.log(fn.getAge ());
That is, Fn is a function, fn object is the new out of the Fn function, so fn object is Fn.prototype the property can call.
However, because each object has a hidden attribute - "_ proto_", this attribute references the object was created prototype function. Namely: fn._proto_ === Fn.prototype
Well, _proto_ here in the end what is it?
In fact, this is a hidden attribute __proto__, javascript developers do not want to use this property value, and some even lower versions of the browser does not support this property value.
var obj = {};
console.log (V .__ proto__);
console.log(Object.prototype);
From the above point of view, obj .__ property proto__ and Object.prototype like! why?
The reason is: this nature object obj Object function is created, so obj.proto === Object.prototype. We can use a graph. (Photo from Wang Fuming blog)
That is, each object has a _proto_ property, pointing prototype function of the object is created .
Talk about custom function prototype:
from the prototype is essentially defined function is and var obj = {} are the same, are created by the Object, so it's __proto__ point is Object.prototype.
However, Object.prototype indeed a special case - it's __proto__ point is null, remember remember !!! (Photos from the Wang Fupeng blog)
Another problem: The function is also an object, function, there __proto__ it?
A: Of course it is no exception!
The following piece of code and use a diagram to illustrate this problem, I believe there is a more intuitive reading to understand it!
function Fn (X, Y) { return X + Y; } the console.log (Fn ( 10,20 )); // The following function is merely to demonstrate Function created var Fn1 = new new Function ( "X", "Y", "return X + Y;" ); the console.log (Fn1 ( 5,6));
The figure is expressed :( Photos from the Wang Fupeng blog)
As can be seen from the figure: Custom Function Foo .__ proto__ point Function.prototype, Object .__ proto__ point Function.prototype.
But why have Function .__ proto__ point Function.prototype it?
It is actually quite simple: Function is a function, the function is an object, but also __proto__ property. Since it is a function, then it must have been created Function. So Function is itself created. So it's __proto__ points to its own Prototype
One last question: Function.prototype pointed object, it is not __proto__ also point Object.prototype?
The answer is yes. Because the object Function.prototype pointed object is also a common Object to be created, so it follows the basic rules. Photos from the figure below :( Wang Fupeng blog)
Having said that, we will be on top of these images integrated into a whole picture to facilitate understanding of the overall picture as follows :( Photos from the Wang Fuming blog)
3. instanceof
is to specify how the judge rules instanceof is carried out. Look at the following code and pictures :( Photos from the Wang Fupeng blog)
function fn() { } var f1 = new fn(); console.log(f1 instanceof fn);//true console.log(f1 instanceof Object);//true
instanceof determines rule is:
Suppose instanceof operator first variable is an object, provisionally called A; second variable is typically a function, provisionally called B.
Instanceof determines rule is: along a line A __proto__ this came, while the prototype B come along this line, if the same two lines can find a reference, i.e., returns true then the same object . If the end point has not been found overlap, false is returned.
This combined determination rule, the above code and illustrated believed readily understood.
4. prototypal inheritance
first word on what the prototype chain:
access the properties of an object, first look at the basic attributes, if not, then look up the _proto_ this chain, which is the prototype chain.
An example of how under the bar:
how to distinguish a property in practical applications in the end is the basic or find it from the prototype?
The answer is: hasOwnProperty this function, especially in the for ... in ... the cycle, we must pay attention. (Photo from Wang Fuming blog)
but! ! f1 itself is not hasOwnProperty this way, that come from it? The answer is simple, is coming in from Object.prototype. See the figure :( Photos from the Wang Fuming blog)
Prototype chain of the object is __proto__ go along this line, so when looking f1.hasOwnProperty property, will follow the prototype chain has been found Object.prototype.
Since all objects in the prototype chain will find Object.prototype, so all objects will have Object.prototype methods. This is called "inheritance."