Understanding JavaScript prototype chain

After reading this article, you will find that prototypes and prototype chains are so simple! The classic prototype chain equality diagram above, according to the following learning, you will easily master it.

1. Understanding the Equality Relationship between Prototype and Prototype Chain

First of all, we need to understand two concepts clearly:

js is divided into function objects and ordinary objects. Each object has a __proto__ attribute, but only function objects have prototype attribute.
Object and Function are built-in functions in js. Similar functions include Array , RegExp , Date , Boolean , Number , and String that we often use.

Please read these two concepts three times with me and remember them. They will be used later.

So what are __proto__ and prototype ? Let's understand them with two concepts

• The attribute __proto__ is an object, which has two attributes, constructor and __proto__ ;
• The prototype object prototype has a default constructor property, which is used to record which constructor created the instance;
  

Please read these two concepts three times with me and remember them. They will be used later.

There is the following constructor Person , whose prototype has the country attribute motherland='China'

 function Person(name, age){ 
    this.name = name;
    this.age = age;
 }
 
 Person.prototype.motherland = 'China'

person01 instance created by new Person()

 let person01 = new Person('Xiaoming', 18);

The father of js followed the following two principles when designing js prototypes and prototype chains:

 Person.prototype.constructor == Person // **Guideline 1: The constructor of the prototype object (ie Person.prototype) points to the constructor itself**
 person01.__proto__ == Person.prototype // **Guideline 2: The __proto__ of the instance (ie person01) and the prototype object point to the same place**

Please read these two rules three times with me and remember them. They will be used later.

Remember the above four concepts and two criteria , any prototype chain equality judgment can be correct;

You can check the above picture to see if you have understood the concept and criteria. Be sure to check the above picture.

// Start analyzing this classic graph from the top function Foo() function Foo()
let f1 = new Foo();
let f2 = new Foo();

f1.__proto__ = Foo.prototype; // Rule 2
f2.__proto__ = Foo.prototype; // Rule 2
Foo.prototype.__proto__ = Object.prototype; // Rule 2 (Foo.prototype is also a common object, so Rule 2 applies)
Object.prototype.__proto__ = null; // The prototype chain stops here Foo.prototype.constructor = Foo; // Rule 1
Foo.__proto__ = Function.prototype; // Rule 2
Function.prototype.__proto__ = Object.prototype; // Principle 2 (Function.prototype is essentially a common object, so Principle 2 applies)
Object.prototype.__proto__ = null; // The prototype chain stops here // **Note the difference between Foo and Function here, Foo is an instance of Function**

// Start analyzing this classic graph from the middle Function Object() Function Object()
let o1 = new Object();
let o2 = new Object();

o1.__proto__ = Object.prototype; // Rule 2
o2.__proto__ = Object.prototype; // Rule 2
Object.prototype.__proto__ = null; // The prototype chain stops here Object.prototype.constructor = Object; // Rule 1
Object.__proto__ = Function.prototype // Principle 2 (Object is essentially a function);
// This is a bit confusing. Object is essentially a function, and Function is essentially an object. Function.prototype.__proto__ = Object.prototype; // Rule 2 (Function.prototype is also an ordinary object, so Rule 2 applies)
Object.prototype.__proto__ = null; // The prototype chain stops here // Start analyzing this classic diagram from Function Function() below Function Function()
Function.__proto__ = Function.prototype // Rule 2
Function.prototype.constructor = Function; // Rule 1

From this we can conclude that except for Object 's prototype object ( Object.prototype ), whose __proto__ points to null , the prototype objects of other built-in function objects (for example: Array.prototype) and custom constructors' __proto__ all point to Object.prototype , because the prototype object itself is an ordinary object. Right now:

Object.prototype.__proto__ = null;
Array.prototype.__proto__ = Object.prototype;
Foo.prototype.__proto__ = Object.prototype;

2: What do prototypes and prototype chains mean?

After understanding these equal relationships, let us think about what the prototype and prototype chain mean. The function of the prototype object is to store the properties and methods that are common to all instances, which can greatly reduce memory consumption.

Take Person constructor and person01 instance at the beginning of our article as an example:

console.log(person01)

Print person01 , he has his own attributes name = 'Xiaoming', age = 18; at the same time, through the prototype chain relationship, he has the attribute motherland = 'China';

Let's create a person2 instance

let person02 = new Person('Xiaohua', 20);
console.log(person02)

Print person02 , it has its own attributes name = 'Xiaohua', age = 20; at the same time, through the prototype chain relationship, it has the attribute motherland = 'China' ; can you see that the prototype object stores the attribute motherland = 'China' shared by person01 and person02 . We do not need to add the motherland attribute to each instance, but store this attribute in their constructor prototype object, for the constructor of human Person. There are many identical properties and methods. For example, we all have black hair, and we all have methods such as eating and sleeping. The more identical properties and methods there are, the greater the significance of the prototype and prototype chain. Then we can do it this way

Person.prototype.hairColor = 'black';
Person.prototype.eat = function(){
    console.log('We usually eat three meals a day.')
}
console.log(person01)
console.log(person02)

At this time, when we print person01 and person02 again, we are pleasantly surprised to find that they have the attribute hairColor and eat method; the instances dynamically obtain the attributes and methods added after Person constructor. This is the meaning of prototypes and prototype chains! Can be obtained dynamically, which can save memory.

Another thing we should note is: if person01 dyed his hair yellow, what would hairColor be?

person01,hairColor = 'yellow';
console.log(person01)
console.log(person02)

It can be seen that person01 's hairColor = 'yellow' , and person02 's hairColor = 'black' ; the instance object overrides the attributes and methods inherited from the prototype, which is equivalent to "property overwriting and property shielding". This operation will not change the properties and methods on the prototype, and naturally will not change other instances created by the unified constructor. Only by modifying the properties and methods on the prototype object can the properties and methods obtained by other instances through the prototype chain be changed.

This is the end of this article about understanding JS prototype prototype chain. For more relevant JS prototype prototype chain content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!