Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what the JavaScript prototype chain refers to", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what the JavaScript prototype chain refers to" this article.

1. Prototype chain 1.1 prototype chain explanation:

Prototype chain refers to a linked list of prototypes formed by _ _ proto__ pointers. A prototype chain can serve objects that want to share data in the prototype chain and is used to implement the inheritance mechanism in JavaScript.

(prototype chain pointer) the pointer 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, and in addition to the _ _ proto__ pointer, there is a constructor pointer to the constructor

Each function is an object. In addition to the _ _ proto__ pointer, there is also a prototype pointer to the prototype object associated with it. The prototype and _ _ proto__ points to different points.

1.2 A diagram of a prototype chain that does not involve inheritance:

Constructor type prototype chain: the objects served by the prototype chain are generated by the constructor (this diagram is very important, involving the underlying chain, and there are similar diagrams on the Internet)

Function A () {} let A1 = new A () let a2 = new A () let a3 = new A () / / these lines of code produce the prototype chain shown below

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

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" and "Object.prototype". Because when it comes to complex inheritance relationships, considering these low-level contents is not conducive to analysis. For general analysis, you can use the following two simplified diagrams.

Function A () {} let A1 = new A () let a2 = new A () let a3 = new A () / / these lines of code produce the prototype chain shown below

1.3 schematic representation of prototype chains involving inheritance

Prototype chains involving inheritance can be analyzed using simplified diagrams.

/ / use parasitic combination pattern to inherit 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 end of prototype chain

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

1.5 the dynamics of the prototype

The dynamics of prototypes are explained in detail in object-oriented programming, which mainly involves the rewriting and modification of prototypes. Here are a few examples.

Example 1-the dynamics of the prototype

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

Example 2-the dynamics of the prototype & the bottom chain of the prototype chain

Var F = function () {}; Object.prototype.a = function () {console.log ('a');}; Function.prototype.b = function () {console.log ('b');} var f = new F (); f.a (); / / af.b (); / / there is no b attribute F.a (); / / aF.b (); / / b

Referring to the first diagram in the above-mentioned "prototype chain diagram without inheritance", you can draw the following simplified reference diagram to analyze the problem.

Example 3-prototype dynamics & prototype chain bottom chain

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

Example 4-prototype dynamics & prototype chain bottom chain

Var foo = {}, F = function () {}; Object.prototype.a = 'value astatine function. Prototype.b =' value breadth objective. Prototype = {a: "value a"} Function.prototype = {b: "value b"} console.log (foo.a); / / value aconsole.log (foo.b); / / undefinedconsole.log (F.a); / / value aconsole.log (F.B); / / value b

Referring to the first diagram in the above-mentioned "prototype chain diagram without inheritance", you can draw the following simplified reference diagram to analyze the problem. Because foo and F bind their prototypes when they declare, they get the address of the prototype stored in heap memory through pointers stored in stack memory. First of all, the prototype modification operation is carried out, and the modification operation will modify the prototype on the heap memory, and foo and F can still access the modified results through the pointer to the stack memory. The second step is to rewrite the prototype. JS are all "value passing operations". After rewriting the prototype, we first open up a new space in the heap memory to store the new prototype, and then re-open a space in the stack memory to store a pointer to the heap memory. At this point, because the stack memory pointer held by foo and F is different from the new stack memory pointer, foo and F cannot access the rewritten prototype.

The above is all the content of the article "what does the JavaScript prototype chain refer to". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.