Detailed explanation of JavaScript prototype chain

1. Constructors and instances

Suppose you declare a method called Foo() , then we can declare an instance through new Foo() .

    function Foo() {
      console.log("I am a constructor");
    }
    const f1 = new Foo();

Now you can clearly see that Foo() is the constructor and f1 is its instance.

2. Property Prototype

Foo() constructor is a method.

Methods are also of object data type, so we can say that a method is an object.

Objects have properties, but methods have their own special property called prototype , which other objects do not have.

This property will point to a prototype object ( Foo.prototype ), which in turn will have a property of its own called constructor , which contains a pointer back to the original constructor.

   function Foo() {
      console.log("I am a constructor");
    }
    const f1 = new Foo();

    console.log(Foo.prototype); //Foo's prototype object console.log(f1.prototype); //f1 is not underfied

3. Property __proto__

prototype above provides shared methods and properties for all instances of the constructor.

How do instances access shared methods and properties?

The f1 instance does not have prototype , but has an attribute __proto__， which is a property of all objects. It points to the prototype object that constructs its own constructor. Then the js language uses this attribute to allow instances to access shared properties and methods.

Foo is the constructor of f1, Foo.prototype is the prototype object of Foo , so f1.__proto__ points to Foo.prototype

    function Foo() {
      console.log("I am a constructor");
    }

    const f1 = new Foo();

    console.log(Foo.prototype);
    console.log(f1.__proto__);

4. Accessing methods on prototypes

If the Foo constructor wants its instances to have the same properties, such as name , it adds it to its prototype object.

   function Foo() {
      console.log("I am a method");
    }

    Foo.prototype.name = "I am a property shared by instances created by Foo";

    const f1 = new Foo();
    const f2 = new Foo();

    console.log(f1.name);//I am a shared property of the instance created by Foo console.log(f2.name);//I am a shared property of the instance created by Foo 

5. Constructors also have __proto__

It says above that all objects have __proto__ . Foo is both a function and an object, so what is Foo.__proto__ ?

Then let's find out who is the constructor of Foo. Foo is a function with function-specific methods and properties. Its constructor is Function, a built-in constructor of js. Its Function.prototype provides some public methods and properties of the function to all the functions you create in js.

So Foo.__proto__ points to Funtion.prototype

6. The prototype of the constructor also has __proto__

Foo.prototype is also an object, so it also has __proto__。

Whenever we look for __proto__， we have to find its constructor. Foo.prototype is an object, a pure object, so its constructor is Object, then the prototype of Object is Object.prototype。

Foo.prototype.__proto__ points to Object.prototype

7. Object.prototype is a very special prototype object

Constructors such as Array , String , Funtion , and Object are all functions.
They are all instances of the Funtion constructor.
Array.__proto__ , String.__proto__ , Funtion.__proto__ , Object.__proto__ point to Funtion.prototype prototype,
You can call some public methods of Funtion.prototype prototype.
For example, you can call name to view the name of your function.

Array.prototype , String.prototype , Funtion.prototype , these prototype objects are all objects.
are all instances of the Object constructor.
Array.prototype.__proto__ , String.prototype.__proto__ , Funtion.prototype.__proto__ point to the Object.prototype prototype.
So you can call the public method of the prototype object Object.prototype ,

Object.prototype is somewhat special. Although it is an object, it is not an instance of Object itself.
Object.prototype.__proto__ points to null, which is the end point of the prototype chain

8. Summary

Only methods, that is, functions, have prototype , which are the prototypes of methods.
Therefore, an instance generally has a corresponding construction method, that is, the constructor, and __proto__ of the instance points to the prototype of the construction method.
js has many built-in construction methods, such as Array , String , Funtion , Object , which are all allocated according to some object types of js, and their prototypes provide many encapsulated common methods.
All construction methods are functions themselves, which are instances of the js built-in constructor Funtion .
Except for Object.prototype , the prototypes of all construction methods are objects themselves, which are instances of the Object constructor that comes with js.
Object.prototype.__prototype points to null, which is the end point of the prototype chain.

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