Detailed graphic explanation of JavaScript prototype chain

Related recommendations: JavaScript tutorial

1. Prototype chain

1.1 Prototype chain explanation:

1. (Concept) Prototype chain refers to a linked list composed of some prototypes through __proto__ pointers. A prototype chain can serve objects that want to share data in the prototype chain and is used to implement JavaScript inheritance mechanism.

2. (Prototype chain pointer) Pointers involved in the prototype chain:

   • Each object has a __proto__ pointer to access the prototype of the object.
   • Each prototype is an object used to implement inheritance. In addition to the __proto__ pointer,
   There is
   • also a constructor pointer pointing to the constructor.
   • Each function is an object. In addition to the __proto__ pointer, there is also a prototype pointer pointing to the prototype object associated with it. The prototype pointer and the __proto__ pointer are not necessarily the same.

1.2 Illustration of the prototype chain that does not involve inheritance:

1. Constructor type prototype chain: The object served by the prototype chain is generated by the constructor (this picture is very important, involving the underlying chain, and there are similar pictures on the Internet)

function A() {

}
let a1 = new A()
let a2 = new A()
let a3 = new A()
// These lines of code will generate the prototype chain shown below

2. Non-constructor type prototype chain: The objects served by the prototype chain are generated by factory functions, object literals, Object.create, etc.

let A = {
    test: ""
}
let a1 = Object.create(A)
let a2 = Object.create(A)
let a3 = Object.create(A)
// These lines of code correspond to the prototype chain shown below

3. Simplified prototype chain: When actually considering the prototype chain, it is often not necessary to consider the "prototype chain corresponding to the instance of the constructor Function", or even the "prototype chain end point" and "Object.prototype". Because considering these low-level contents is not conducive to analysis when it comes to complex inheritance relationships. For general analysis, the following two simplified diagrams can be used.

function A() {

}
let a1 = new A()
let a2 = new A()
let a3 = new A()
// These lines of code will generate the prototype chain shown below

1.3 Illustration of the prototype chain involving inheritance

The prototype chain involving inheritance can be analyzed using a simplified diagram

// Use the parasitic combination mode to implement the inherited function C() {}
function B() {}
B.prototype = new C()
function A() {}
A.prototype = new B()

let a1 = new A()
let a2 = new A()
let a3 = new A()

1.4 The end point

of the prototype chain The end point of the prototype chain is null, which does not refer to a prototype object

1.5 The dynamics of the prototype

The dynamics of the prototype are explained in detail in "Object-oriented Programming", and it mainly involves the rewriting and modification of the prototype. Here are a few examples.
Example 1—Prototype Dynamics

var A = function() {};
A.prototype.n = 1;
var b = new A();
A.prototype = {
    n: 2,
    m: 3
}
var c = new A();

console.log(bn); // 1
console.log(bm); // undefined

console.log(cn); // 2
console.log(cm); // 3

Example 2 - Dynamics of prototype & prototype chain bottom chain

var F = function() {};

Object.prototype.a = function() {
    console.log('a');
};

Function.prototype.b = function() {
    console.log('b');
}

var f = new F();

fa(); // a
fb(); // The b attribute does not exist Fa(); // a
Fb(); //

bRefer to the first picture in the "Prototype Chain Diagram Not Involving Inheritance" mentioned above, you can draw the following simplified reference diagram analysis problem.

Example 3—Prototype Dynamics & Prototype Chain Bottom Chain

Function Person(name) {
    this.name = name
}
let p = new Person('Tom');
console.log(p.__proto__) // Person.prototype
console.log(Person.__proto__) // Function.prototype

Example 4—Prototype Dynamics & Prototype Chain Bottom Chain

var foo = {}, F = function(){};
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';
Object.prototype = {
    a: "value a"
}
Function.prototype = {
    b: "value b"
}

console.log(foo.a); // value a
console.log(foo.b); // undefined

console.log(Fa); // value a
console.log(Fb); // value b

refers to the first picture in the "Prototype Chain Diagram Not Involving Inheritance" mentioned above to draw the following simplified reference diagram analysis problem. Since foo and F bind their prototypes when they are declared, they obtain the address of the prototype stored in the heap memory through the pointer stored in the stack memory. First, the prototype is modified. The modification operation will modify the prototype on the heap memory. foo and F can still access the modified result through the pointer of the stack memory. The second step is to rewrite the prototype. JS is all "value transfer operations". After rewriting the prototype, first open up a new space in the heap memory to store the new prototype, and then open up a new space in the stack memory to store the pointer to the heap memory. pointer. At this time, because the stack memory pointers held by foo and F are different from the new stack memory pointers, foo and F cannot access the rewritten prototype.

Related recommendations: JavaScript learning tutorial.

The above is a detailed explanation of the JavaScript prototype chain with pictures and texts. For more information, please pay attention to other related articles on the PHP Chinese website!