Read prototypes and prototype chains to understand the underlying principles of js.

Prototypes and prototype chains in JavaScript are one of the core concepts for understanding object-oriented programming in the language.

1.  Prototype:

   • 
     In JavaScript, every object has a prototype, which is a reference to another object. This object is called a prototype object.
   • 
     When trying to access a property of an object, if the object itself does not have the property, JavaScript looks up the prototype chain until it finds the corresponding property or reaches the end of the chain (i.e., Object.prototype).
   • 
     The prototype of an object can be obtained using the Object.getPrototypeOf() method.

2.  Prototype chain:

   • 
     A prototype chain is a model of relationships between objects in which each object has a reference to its prototype, thus forming a chain structure.
   • 
     When trying to access an object’s properties, the JavaScript engine first looks in the object’s own properties, and if it doesn’t find one, it looks up the prototype chain until it finds the appropriate property or reaches the end of the prototype chain.
   • 
     At the top of the prototype chain is Object.prototype, which is the root prototype for all objects in JavaScript.

The concepts of prototypes and prototype chaining enable objects in JavaScript to share properties and methods and to implement features such as inheritance and property delegation. Through prototype chaining, it is possible to realize the sharing and inheritance of properties and methods between objects, which effectively improves the reusability and maintainability of code.

Understanding of prototype, __proto___ and constructor

 1. Function itself attributes

Function also belongs to the object, we can see from its length is the number of formal parameters, [[scope]] for the function of the scope we can not access, but for the browser is very important, the name of the function is its name, although it seems to be a little redundant ha.

 2. Extract the common attributes to the prototype object

We can see that in the code, everything is fixed except for color and owner, which are passed in parameters to determine, and we can then pull out commonly owned properties or methods and put them on the prototype object of the constructor.

Properties on the prototype object of the constructor are available to all of its instance objects, but they are implicit, that is, we can’t access them even when we print the instance object; we must access them by accessing the properties.

This time we will find that product will print ‘huawei’ but it is already explicit. Why? Because the product at this time is not the same thing as the product on the prototype object.

 3. Understanding of the three

 Reading the following code will deepen our understanding

function People(color) {
  this.color = color
}
People.prototype.ear = 2
let p = new People('yellow')
console.log(p.__proto__ === People.prototype);
console.log(p.constructor === People.prototype.constructor);
console.log(p.constructor === People);
console.log(p.__proto__.__proto__ === Object.prototype);
console.log(p.__proto__.__proto__.constructor === Object);

 The end result is true, why?

1. p.__proto__ === People.prototype:

   • 
     __proto__ is a property that points to the prototype of the object. Here, p is created by the People constructor, so its prototype is People.prototype . So, this expression returns true .

2. p.constructor === People.prototype.constructor:

   • 
     constructor is an attribute of a JavaScript object that points to the constructor that created the object. People.prototype.constructor is the People function itself, since it is the default constructor for People.prototype . Therefore, p.constructor will also point to People , so the two are identical.

3. p.constructor === People:

   • 
     This expression checks if the constructor of p is People . Since p was created with the People constructor, this expression returns true .

4. p.__proto__.__proto__ === Object.prototype:

   • 
     Since p.__proto__ is the prototype of People.prototype , then p.__proto__.__proto__ is the prototype of People.prototype . For most constructors, their prototype is Object.prototype . Therefore, this expression is checking if the prototype of People.prototype is Object.prototype and the result is true .

5. p.__proto__.__proto__.constructor === Object:

   • 
     Here, p.__proto__.__proto__ is Object.prototype and constructor of this prototype is the Object constructor. Therefore, this expression is checking if Object.prototype.constructor is Object and the result is also true .

Together, these results show how JavaScript’s prototypes and prototype chains work, indicating object creators, inheritance relationships, and the relationship of constructors to prototypes.

 4. Illustration of a prototype chain example

1. 
   First we look up the age of the SON, and since the SON has the age (18) in it, we output it directly.
2. 
   The property attribute is inside father, so son can’t look it up and will go to the object prototype of son (the instance object of father) and find that it’s there.
3. 
   We can find that like is only available in grandpa therefore, the object prototype of son is not available either, so we look for the object prototype of son, which is an instance object of grandpa.
4. 
   And there is no instance object of say’s grandfather, so looking for its object prototype, which is the object prototype of son’s object prototype, we eventually found it.
5. 
   So we also know the underlying lookup mechanism of js, which is essentially that if the instance object can’t find the property, it looks up to the object prototype. Layer by layer, until you find out. Like a chain structure, so it is called the prototype chain.

5.99% of all objects have a prototype, that is, the prototype object of their constructors

This is one of the most frequently asked questions in interviews, so do all objects have prototypes? The answer is wrong. Most of them do, but not in the above case.

6. Why does the instance object of a constructor inherit the properties and methods of the prototype object?

As we can see, it’s the extra step of having the prototype of the instance object point to the prototype object when the object is created, so we can access it.

Of course! JavaScript prototypes and prototype chains are like a mysterious continent full of surprises that will make you marvel and laugh at times.

Imagine you’re a JavaScript adventurer embarking on a journey through the prototype chain. At first, you create a new object, like building a boat. But this boat has a compass on it, which points to your prototype and tells you where to go. You begin the adventure, rowing in the direction of the prototype.

Along the way, you find all kinds of treasures and monsters. Some of the treasures are properties and methods of objects, which are hidden in your boat and make you stronger; some monsters are unknown properties that make you tremble. But don’t worry, you have a sharp sword – __proto__ – to cut through all the unknowns.

The prototype chain is like a series of connected islands that you can jump from one island to another, and keep jumping up until you find the final treasure – Object.prototype . The treasure on this island is the root of all objects in JavaScript.

Sometimes you get lost in the labyrinth of archetypal chains, confused as to what to do. But don’t worry, just remember that your boat is always pointing towards the archetype and you’ll find your way home.

So, JavaScript’s prototypes and prototype chains are like a marvelous adventure for you to experience the fun of exploring the unknown and the joy of discovering treasures. May you always be filled with courage and curiosity in the world of JavaScript! Of course! JavaScript prototypes and prototype chains are like a mysterious continent full of surprises that will make you marvel and laugh at times.

Imagine you’re a JavaScript adventurer embarking on a journey through the prototype chain. At first, you create a new object, like building a boat. But this boat has a compass on it, which points to your prototype and tells you where to go. You begin the adventure, rowing in the direction of the prototype.

Along the way, you find all kinds of treasures and monsters. Some of the treasures are properties and methods of objects, which are hidden in your boat and make you stronger; some monsters are unknown properties that make you tremble. But don’t worry, you have a sharp sword – __proto__ – to cut through all the unknowns.

The prototype chain is like a series of connected islands that you can jump from one island to another, and keep jumping up until you find the final treasure – Object.prototype . The treasure on this island is the root of all objects in JavaScript.

Sometimes you get lost in the labyrinth of archetypal chains, confused as to what to do. But don’t worry, just remember that your boat is always pointing towards the archetype and you’ll find your way home.

So, JavaScript’s prototypes and prototype chains are like a marvelous adventure for you to experience the fun of exploring the unknown and the joy of discovering treasures. May you always be filled with courage and curiosity in the world of JavaScript!