Today saw the heart elder brother’s blog post this may be nuggets speak “prototype chain”, speak the best and most easy to understand, attached exercises! “, let me have a new understanding of the prototype chain, then I will now put my new understanding, through the analysis of the heart brother blog after the five exercises, to share with you ~
You can go to see the heart elder brother’s blog before you see the solution ~ but I will also take you briefly review ~
What is a prototype chain? In fact, the saying is: the __proto__ path is called the prototype chain
Free variable search, is to follow the prototype chain up the search!
I’ll draw the prototype for Function and Object (omit constructor), because here we are more concerned with the prototype chain __proto__, which is the green line drawn in the diagram!
-
Orange is an explicit prototype. In JavaScript, all functions have an explicit prototype, and an explicit prototype is an object
-
The grass green is an implicit prototype __proto__. In JavaScript, all objects have an implicit prototype that points to an explicit prototype of their constructor
Object is a constructor, so it has an explicit prototype, an implicit prototype of an explicit prototype of Object, pointing to the end of the prototype chain — NULL
Function is a constructor, and it has an explicit prototype, and an explicit prototype is an Object, so it has an implicit prototype that points to the explicit prototype of its constructor, that is, function.prototype. __proto__ === object.prototype
Exercise 1
The title
var F = function() {};
Object.prototype.a = function() {
console.log('a');
};
Function.prototype.b = function() {
console.log('b');
}
var f = new F();
f.a();
f.b();
F.a();
F.b();
Copy the codeThe illustration
We go line by line
var F = function() {};
Copy the codeHere we create a Function F as a Function expression, which is equivalent to an instance of Function, so f. __proto__ points to an explicit prototype of Function
F is a function, and it has an explicit prototype Object. The explicit prototype Object is an Object, so its implicit prototype points to the explicit prototype of Object.
Object.prototype.a = function() {
console.log('a');
};
Copy the codeHere we create a function a on an explicit prototype of Object and print a
Function.prototype.b = function() {
console.log('b');
}
Copy the codeHere we create a Function b on an explicit prototype of Function and print b
var f = new F();
Copy the codeHere is an instance object F that creates F, where F is an object, so it has implicit stereotypes, explicit stereotypes that point to its constructor
The last thing is to look at f and the prototype chain of F
Just follow the grass-green prototype chain and mark it with locator markers on the way
Prototype = Function. Prototype; Object. Prototype; null
The prototype chain of F has F. protoType, Object. Prototype and NULL
According to the graph, the following answer is clear!
The answer
f.a(); // a
f.b(); // undefined
F.a(); // a
F.b(); // b
Copy the codeExercises 2
The title
var A = function() {};
A.prototype.n = 1;
var b = new A();
A.prototype = {
n: 2.m: 3
}
var c = new A();
console.log(b.n);
console.log(b.m);
console.log(c.n);
console.log(c.m);
Copy the codeThe illustration
var A = function() {};
Copy the codeHere we create A function called A, the prototype diagram looks like this, and we omit the null at the end of the prototype chain this time!
A.prototype.n = 1;
Copy the codeAdd an attribute n with A value of 1 to the explicit stereotype of A
var b = new A();
Copy the codeCreate an instance object B of A
A.prototype = {
n: 2.m: 3
}
Copy the codeHere we reassign the explicit prototype object of A to A new object
However, the original object still retains b’s reference to it, so the garbage collection mechanism will not clean up the original object
var c = new A();
Copy the codeAt this point, an instance object C of A is created, where the C object points to A’s new explicit prototype object
Finally, look at the prototype chain of B and C, as shown in the figure
The answer
console.log(b.n); / / 1
console.log(b.m); // undefined
console.log(c.n); / / 2
console.log(c.m); / / 3
Copy the codeExercises 3
The title
var foo = {},
F = function(){};
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';
console.log(foo.a);
console.log(foo.b);
console.log(F.a);
console.log(F.b);
Copy the codeThe illustration
var foo = {},
F = function(){};
Copy the codeSo let’s first create an object called foo
And then create a function F
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';
Copy the codeAdd an A attribute to the explicit prototype object of Objetct
Add a b attribute to the explicit prototype object for Function
Finally, look at the prototype chain of F and Foo
The answer
console.log(foo.a); // value a
console.log(foo.b); // undefined
console.log(F.a); // value a
console.log(F.b); // value b
Copy the codeExercises 4
The title
function A() {}
function B(a) {
this.a = a;
}
function C(a) {
if (a) {
this.a = a;
}
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
console.log(new A().a);
console.log(new B().a);
console.log(new C(2).a);
Copy the codeThe illustration
function A() {}
function B(a) {
this.a = a;
}
function C(a) {
if (a) {
this.a = a; }}Copy the codeCreate three functions
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
Copy the codeAdd the attribute a to the explicit prototype of the function
new A()
new B()
new C(2)
Copy the codeCreate three instance objects, execute the code in the constructor, this points to the instance object, which is equivalent to adding attributes to the instance object itself
The answer
console.log(new A().a); / / 1
console.log(new B().a); // undefined
console.log(new C(2).a); / / 2
Copy the codeExercises five
The title
console.log(123['toString'].length + 123)
Copy the codeThe illustration
Calling the toString method after 123 causes JavaScript to generate a primitive wrapper Object, which wraps 123 as a Number Object, and then follows the prototype chain to find the toString method on the Object, whose length is 1
The answer
console.log(123['toString'].length + 123) / / 124
Copy the codeThe last
Do you have any more questions?
Drop it, I’ll illustrate!! Calculate, after ripe, need not draw a map!
Just remember that functions and objects have implicit and explicit archetypes, and the chain of archetypes follows the implicit archetypes, which refer to the explicit archetypes of their constructors!!