Analytic prototype chain

Prototype chains are one of the most interesting aspects of JavaScript design. Before parsing the prototype chain, there are a few important concepts to understand.

The constructor

A constructor is a special type of function that is usually artificially capitalized and must be called by the new operator (essentially different from normal functions) to create an object of a particular type. There are also some native constructors in JavaScript, such as Object, Array, Function, etc.

The instance

Each time the constructor is called by the new operator, a new object is created, a process called instantiation. And that object is called an instance. That is, any object is an instance, but the key is what constructor creates that instance? And who is it based on?

The prototype

Inside the constructor is a special property called prototype, which refers to an object. Yes, it is a prototype, also known as a prototype object. A Prototype object is a special case in that whenever a constructor instantiates an object, the instance’s [[Prototype]] default points to the constructor’s Prototype. The instance object can find the prototype object through its [[Porototyoe]] property, and the prototype object can find out which constructor created the instance through its own construcor property. (Note that many browsers replace the attribute [[Prototype]] with __proto__.)

The relationship between constructor, instance, and stereotype values

To further clarify the relationship between constructors, instances, and stereotypes, we can start with the following image

  1. The instancedogBy itself[[Prototype]]Property finds the archetypeDog.prototype
  2. The constructorDogBy itselfprototypeProperty finds the archetypeDog.prototype
  3. The prototypeDog.prototypeThrough its ownconstructorProperty finds the constructorDog
  4. The instancedogthroughconstructorProperty finds the constructorDog.
  • For instancedogthroughconstructorProperty finds the constructorDogWhy don’t we use solid arrows? What are the details here 🤔, let’s look at a simple piece of code and an image again
function Dog(name){
    this.name = name;
    
}
let dog = new Dog("cheems");
Copy the code

Example dog does not have the constructor attribute, whereas the prototype object does. How does the instance get this attribute 🤔? This refers to a particular behavior in JavaScript called delegation. let’s look at what delegates are.

entrust

When we try to get the value of a property of an object, but the object doesn’t have that property, JavaScript tries to get the property value from the prototype object. If the prototype Object doesn’t have this property, then look for its prototype and so on until the end of the process reaches Object.prototype. If still not found, undefined is returned. This process is called delegation.

Now you can see how the instance Dog found its way to create its own constructor through delegates. Once that was understood, the prototype chain was in place.

Prototype chain

If the desired attribute or method reference is not found on the first object, the engine continues to look on the object to which its [[Prototype]] reference points. In the same way, if no reference is found in the latter, the [[Prototype]] of the Object is searched, and so on until object. Prototype is reached.

We can draw a picture of it

Since a constructor is also an object, it also has a constructor and a stereotype. The constructor’s prototype is the instance’s prototype, not its own. A custom constructor also needs to find its Prototype with the help of [[Prototype]] to create its own constructor — the native constructor Function, but note that the [[Prototype]] of the native constructor Function refers to function.prototype.

console.log(Function.__proto__ === Function.prototype); // true
Copy the code

All prototype objects can be found along the prototype chain until the final prototype Object object. prototype is found. Then object. prototype is Null, which indicates that there is no Object.

summary

Fully understanding the prototype chain is one of the important steps to understand the JavaScript language, and it will be of great help to understand the implementation of JavaScript inheritance. If you’ve gone through the prototype chain, in my next article I’ll take you into the world of JavaScript inheritance.

The last

This is the end of JavaScript prototype chain sharing. If you have a deeper understanding of JavaScript prototype chain after reading this article, please give me a thumbs up to encourage 😄! Your support is my motivation to continue sharing knowledge about JavaScrit. Thank you for reading this article