How to Understand JS prototype chain and JS prototype chain

How to Understand JS prototype chain and JS prototype chain

Before talking about the prototype chain, we must first understand the relationship between user-defined functions and functions. What are the links between constructors, prototypes, and instances? In fact, all functions are Function instances. There is a prototype attribute on the constructor, which is also an object. A constructor attribute on the prototype object directs to the constructor; the instance object has a _ proto _ attribute, which also points to the prototype object. This attribute is not a standard attribute and cannot be used in programming. This attribute is used inside the browser.

// _ Proto _ There is a prototype attribute in the function. The object created by this function will be connected to this attribute by default. // The Relationship Between prototype and _ proto _ is from the object perspective. prototype is from the perspective of constructor.

Next, let's look at the figure.

1. Relationships between constructors, prototypes, and instances

① + Object

② + Function + Object + Array

　　

After learning about this, let's discuss what prototype chain is. To put it bluntly, a finite chain is formed between a limited instance object and a prototype, which is used to implement shared attributes and inheritance. Next, let's talk about the code.

Var obj = new Object (); the Object is a prototype Object with the original type Object and also has the original type Object obj. _ proto _. _ proto _. _ proto _ the prototype object also has the original type object. The prototype object of the object is always searched up and a null // prototype chain example var arr = []; arr-> Array. prototype-> Object. prototype-> null var o = new Object (); o-> Object. prototype-> null; function Foo1 () {this. name1 = '1';} function Foo2 () {this. name2 = '2';} Foo2.prototype = new Foo1 (); function Foo3 () {this. name = '3';} Foo3.prototype = new Foo2 (); var foo3 = new Foo3 (); console. dir (foo3 );

The next step is the inheritance problem.

2. Inheritance

1) prototype inheritance

Function Animal (name) {this. name = name;} function Tiger (color) {this. color = color;} // var tiger = new Tiger ('yellow'); // console. log (tiger. color); // console. log (tiger. name); // undefined // Tiger. prototype = new Animal ('tiger'); // a method of Object. prototype. name = 'Big Tiger'; // method 2 var tiger = new Tiger ('yellow'); console. log (tiger. color); console. log (tiger. name );

It is worth noting that there are two main problems: ① it is not convenient to pass parameters to the parent type; ② the reference type in the parent type is shared by all instances.

2) ES5 provides the Object. create () method to implement inheritance.

---- Compatible // shim gasket function create (obj) {if (Object. create) {return Object. create (obj);} else {function Foo () {} Foo. prototype = obj; return new Foo ();}}

This method is a new feature of ES5, which is actually replication inheritance.

3) Copy inheritance

var obj = {}; obj.extend = function(obj){   for(var k in obj){    this[k] = obj[k];   } }

4) borrow constructor inheritance-borrowed constructor members in the original form are not borrowed

Function Animal (name) {this. name = name;} function Mouse (nickname) {Animal. call (this, 'mouse '); this. nickname = nickname;} var m = new Mouse ('Jerry '); console. log (m. name); console. log (m. nickname );

Existing problems: it can solve the problem of parameter passing during prototype inheritance, but the members (attributes and methods) on the prototype object in the parent type cannot be inherited

5) combined inheritance-prototype objects are dynamic.

Function Person (name) {this. name = name;} Person. prototype. showName = function () {console. log (this. name);} function Student (name, age) {Person. call (this, name); this. age = age;} Student. prototype = new Person (); Student. prototype. contructor = Student; Student. prototype. showAge = function () {console. log (this. age);} var stu = new Student ('zhang san', 12); stu. showName (); stu. showAge ();

[Prototype inheritance + borrow constructor inheritance] It features a copy of each attribute for each instance, and the methods are shared.

[Summary]To apply a very rough sentence, the so-called prototype chain is a behavior method of finding a mother. It can be understood that a person is born as a mother, and a demon is born as a mother. There is actually only one core of the prototype chain: Property Sharing and independent control. When your object instance requires independent attributes, the essence of all practices is to create attributes in the object instance. If you don't think too much about it, You can directly define the attributes you need in Person to overwrite the attributes of the prototype. In short, when using prototype inheritance, you should pay special attention to the attributes in the prototype, because they all exist as a whole. The most common method is the combination mode.

1. prototype chain

1) relationships between constructors, prototypes, and instances

① Constructor has a prototype attribute, which is an Object (Object instance) ② prototype of the prototype has a constructor attribute, this property points to the constructor to which the prototype object belongs. ③ the instance object has a _ proto _ property. This property also points to the constructor's prototype object, which is a non-standard property, it cannot be used for programming. It is used by the browser itself. 2) Relationship between prototype and _ proto _

① Prototype is the property of the constructor.

② _ Proto _ is the attribute of the Instance Object

-- Both point to the same object.

[Summary]I) functions are also objects, and objects are not necessarily functions;

Ii) essence of an object: unordered set of key-value pairs; values in key-value pairs can be values of any data type

Iii) The object is a container. The attributes and methods in the container are)

3) attribute search

① When accessing a member of an object, the system first checks whether the object exists.

② If the current object does not exist, find it in the prototype object of the constructor.

③ If the prototype object is not found, search for the prototype object.

④ It is known that the prototype of the Object is null.

2. Function

-- All functions are Function instances.

① Local objects: objects independent of the host environment (browser), including objects, Array, Date, RegExp, Function, Error, Number, String, and Boolean

② Built-in objects-including Math and Global (window, which is a Global variable in js ).

③ Host Object-including custom object, DOM, and BOM

The above section describes how to understand the JS prototype chain. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!