The ultimate explanation of JavaScript prototype and prototype chain, and the explanation of javascript prototype

The ultimate explanation of JavaScript prototype and prototype chain, and the explanation of javascript prototype

Ultimate explanation of JavaScript prototype and prototype chain

1. Common objects and function objects

In JavaScript, everything is an object! But there are also differences between objects. It can be divided into common objects and Function objects. Objects and functions are built-in Function objects of JS. The following is an example

function f1(){};var f2 = function(){};var f3 = new Function('str','console.log(str)');var o3 = new f1();var o1 = {};var o2 =new Object();console.log(typeof Object); //functionconsole.log(typeof Function); //functionconsole.log(typeof o1); //objectconsole.log(typeof o2); //object　console.log(typeof o3); //object　　console.log(typeof f1); //function　　console.log(typeof f2); //function　　console.log(typeof f3); //function 

In the preceding example, o1 o2 o3 is a common object, and f1 f2 f3 is a function object. How to differentiate is actually very simple. All objects created through new Function () are Function objects, while others are common objects. F1 and f2 are all created using the new Function () method. Function objects are also created through New Function.

Ii. Prototype object

In JavaScript, every time an object (function) is defined, the object contains predefined attributes. One Property of the function object is prototype. Note: common objects do not have prototype, but have the _ proto _ attribute.

The prototype object is actually a Common Object (except Function. prototype, which is a Function object, but it is very special. It does not have the prototype attribute (previously mentioned that Function objects all have the prototype attribute )). See the following example:

function f1(){};console.log(f1. prototype) //f1 {}console.log(typeof f1. prototype) //Objectconsole.log(typeof Function. prototype) // Functionconsole.log(typeof Object. prototype) // Objectconsole.log(typeof Function. prototype. prototype) //undefined

From the output of console. log (f1. prototype) // f1 {}, we can see that f1. prototype is an instance object of f1. When f1 is created, it creates an instance object and assigns prototype to it. The basic process is as follows:

var temp = new f1();f1. prototype = temp;

Therefore, why Function. prototype is a Function object is easily solved. In the above example, all objects generated by new Function () are Function objects, so temp is a Function object.

var temp = new Function ();Function. prototype = temp;

What is the prototype used? It is mainly used for inheritance. For example:

var person = function(name){　　this.name = name};person.prototype.getName = function(){return this.name;}var zjh = new person(‘zhangjiahao');zjh.getName(); //zhangjiahao

From this example, we can see that by setting the property of a function object for person. prototype, a common object from the person instance (in this example: z.pdf) inherits this property. The following prototype chain is required for the implementation of inheritance.

Iii. prototype chain

When JS creates an object (whether a common object or a function object), it has a built-in attribute called _ proto _, which is used to point to the prototype of the function object that creates it. The preceding example is used as an example:

Console. log (zwon. _ proto _ = person. prototype) // true

Similarly, the person. prototype Object also has the _ proto _ attribute, which points to the prototype of the function Object that creates it.

Console. log (person. prototype. _ proto _ = Object. prototype) // true

The Object. prototype Object also has the _ proto _ attribute, but it is special and is null.

Console. log (Object. prototype. _ proto _) // null

We concatenate _ proto _ until the Object. prototype. _ proto _ is null. For example:

Iv. Memory Structure

For a deeper and more intuitive understanding, we will draw the above memory structure diagram:

Drawing conventions:

Explanation:

1. Object. _ proto _ = Function. prototype // true

An Object is a Function Object created through new Function (). Therefore, Object. _ proto _ points to Function. prototype.

2. Function. _ proto _ = Function. prototype // true

Function is also an object Function and is created through new Function (). Therefore, Function. _ proto _ points to Function. prototype.

It seems that you are created by yourself and it does not conform to the logic, but think about it carefully. The real world is similar. How did you come from your mom, you have been born ,...... Where did the ape come from when it evolved? Keep tracing ......, Is none. (NULL creates everything)

As the moral Sutra says, "No, the beginning of the world ".

3. Function. prototype. _ proto _ = Object. prototype // true

In fact, I am also a little confused, but I can try to explain it.

Function. prototype is a Function object. In theory, its _ proto _ should point to Function. prototype, which is itself, pointing to itself, without significance.

JS has always stressed that everything is an Object, and function objects are also objects. It recognizes the ancestor and points to Object. prototype. Object. prototype. _ proto _ = null to ensure that the prototype chain can end normally.

V. constructor

The prototype object has a predefined constructor attribute, which is used to reference its function objects. This is a type of circular reference.

person.prototype. constructor === person //trueFunction.prototype.constructor === Function //trueObject.prototype.constructor === Object //true

Complete the above memory structure:

Note the following two points:

1. Note that Object. constructor === Function; // true itself, the Object is constructed by the Function.
2. How to Find the constructor of an object is to find the object pointed to by the first constructor attribute on the prototype chain of the object

Vi. Summary

1. prototype and prototype chain are a model inherited by JS implementation.

2. The prototype chain is formed by _ proto _ rather than prototype.

If you want to understand this sentence in depth, let's take another example to see if you have really understood it before?

var animal = function(){};var dog = function(){};animal.price = 2000;//dog.prototype = animal;var tidy = new dog();console.log(dog. price) //undefinedconsole.log(tidy.price) // 2000

Why? Draw a memory diagram:

What is the problem? Run dog. the price attribute is not found. Although the animal to which prototype points has this attribute, it does not search for it along this "chain. Similarly, run tidy. this attribute is not available at price, but _ proto _ points to animal, which will be searched along this chain. animal has the price attribute, so tidy. price output 2000. It is concluded that the real formation of the prototype chain depends on _ proro __, rather than prototype.

Therefore, if dog. _ proto _ = animal is specified in this way. Dog. price = 2000.

<! -- [If! SupportLists] --> 1.

<! -- [Endif] --> although the last analogy is not very accurate, it may be helpful to understand the prototype.

Father (function object), Mr. has a eldest son (prototype), that is, your eldest brother. His father bought many toys for your eldest brother. When you were born, the family ties between you (_ proto _) will naturally let you own your eldest brother's toys. Similarly, you have a eldest son and bought many toys for him. When you regenerate your son, your youngest son will naturally own all the toys of your eldest son. As for whether they will fight, this is not our case.

So, you inherited from your eldest brother and confirmed the sentence "brother-in-law ".

Articles you may be interested in:

• Javascript prototype chain and inheritance
• Understanding the javaScript prototype chain
• Explanation of the original JavaScript model and prototype chain
• Prototype chain inheritance instance of js Object Inheritance
• Javascript prototype chain maintenance and inheritance
• A misunderstanding of Javascript prototype chain and prototype
• Javascript learning notes (5) prototype and prototype chain
• Deep understanding of prototype chain in javascript
• Incomplete inheritance of javascript tutorials (js prototype chain)
• Principles of Javascript prototype chain