What exactly are prototype objects and prototype chains?

To understand a prototype object, you need to understand what an object is in JS: is a JavaScript object a container of named values

// This code assigns a single value of vehicle to the car variable
let car = "vehicle";
Copy the code

Objects are also variables. But objects contain many values:

// This code assigns multiple values (vehicle, hongqi, black) to a variable named CAR:
let car = {type:"vehicle".model:"hongqi".color:"black"};
Copy the code

Now that we know what an object is, let’s move on. Here I want to quote a definition from the MDN documentation: JavaScript is often described as a prototype-based language — each object has a prototype object from which the object is a template and inherits methods and properties. A stereotype object may also have a stereotype from which it inherits methods and properties, layer by layer, and so on. This relationship, often referred to as the Prototype chain, explains why one object has properties and methods defined in other objects.

Two, through a simple chestnut to illustrate their relationship

Two concepts should be understood first:

  1. All objects in JS have a built-in __proto__ attribute, but only function objects have a built-in prototype attribute
  2. The following functions, including Object and Function, as well as Data, Math, Array, String, Number, Boolean, and RegExp, are built-in JS functions
  function Animal(name, age) {
    this.name = name;
    this.age = age;
  };
  console.log(Animal.prototype);
  // Define the public method say on the prototype object
  Animal.prototype.say = function (){
    console.log('say');
  }
  // Instantiate an object ANI
  let ani = new Animal('xiaobai'.8);
  let ani1 = new Animal();
  let ani2 = new Animal();
  console.log(ani);
Copy the code

Animal.prototype the prototype property contains a constructor attribute and a __proto__ attribute

  • Note that constructor refers to the defined function object Animal
  • The function object is also associated with its prototype object via prototype

Now the reader may have a question: how can the instantiated object ANI be associated with the function prototype object? Remember __proto__, then it is used to find the function prototype object. We can certainly instantiate more than one object; we can instantiate one, two, or even 100 objects if we need to. So many objects can find function prototype objects by __proto__, this is known as the prototype chain.

Here are the results of our ANI print

At this point, we can summarize the concept and connection between prototype objects and prototype chains in a small way by using a diagram. There is also a point I didn’t mention earlier. The end point of the prototype chain is Object.prototype, and the prototype Object points layer by layer until pointing to it, while Object.prototype points to Null

Three, endnotes

This article also only briefly talked about the prototype object and prototype chain related concepts, there are a lot of content can not be finished at a time, I am also the front end of the white, if there is wrong hope big guy to give guidance, thank you!