This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.

preface

Prototype chain has always been js interview questions, but also JS very core basic knowledge, perhaps usually not often use, but to understand it will allow themselves to greatly deepen the understanding of this language, this article is very easy to understand the prototype chain, read down patiently, I believe that will be able to help you.

Constructor and instance

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

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

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

Properties of the Prototype

The Foo() constructor is a method.

Methods are also object data types, so you can say that a method is an object.

Objects have properties, but methods have their own special property called Prototype. Other objects don’t.

This property points to a prototype object (foo.prototype), which also has a property of its own called constructor that 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);/ / no underfied f1
Copy the code

Attribute __proto__

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

How do instances access shared methods and properties?

The f1 instance doesn’t have prototype. Instead, it has an attribute __proto__, which all objects have. It points to the prototype object that builds its own constructor, and the js language uses this attribute to give instances access to shared properties and methods

Foo is the constructor of f1, and 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__);
Copy the code

Access methods on the prototype

The Foo constructor adds it to its prototype object if it wants its instance to have the same property, such as name.

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

    Foo.prototype.name = "I'm a shared property of an instance created by Foo.";

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

    console.log(f1.name);// I am a property shared by instances created by Foo
    console.log(f2.name);// I am a property shared by instances created by Foo
Copy the code

So this brief summary

SequenceDiagram Example f1 ->> Constructor Foo: creates constructor Foo->> constructor prototype object Foo. Prototype: Constructor instance f1->> constructor prototype object Foo. Prototype: __proto__

Constructors also have __proto__

All objects have a __proto__. Foo is a function and an object, so what is foo. __proto__?

Foo is a Function that has function-specific methods and properties, and its constructor is Function, which is a built-in js constructor, Its function. prototype gives all functions you create in JS the public methods and properties that come with the Function.

So foo.__proto__ points to Funtion. Prototype

The constructor’s prototype also has __proto__

Foo. Prototype is also an object, so it also has __proto__.

Foo. Prototype is an Object, pure Object, so its constructor is Object, so Object’s prototype is Object.prototype.

Foo. Prototype. __proto__ pointing to the Object. The prototype

This prototype Object is very special

The constructors Array, String, Funtion, and Object are all functions and instances of the Funtion constructor. Array.__proto__, String.__proto__, Funtion.__proto__, Object.__proto__ points to Funtion. Prototype, You can call some of the public methods of the Funtion. Prototype prototype, for example.

Prototype: array. prototype, String.prototype, and Funtion. Prototype are all objects that are instances of the Object constructor. Array.prototype.__proto__, string.prototype. __proto__, funtion.prototype. __proto__ points to Object. Prototype, So you can call the Object. Prototype public method,

Object.prototype.__proto__ points to null as the end of the prototype chain

conclusion

  1. Methods, functions, are thereprototypeIs the prototype of the method.
  2. So an instance, in general, will have a corresponding constructor, which is the constructor of the instance__proto__Points to the stereotype of the constructor.
  3. Js has many built-in constructors, such as Array, String, Funtion, Object, which are allocated according to some Object types of JS. Their prototypes provide many encapsulated common methods.
  4. allA constructorItself isfunction, it isFuntionThis js comes with a constructorThe instance.
  5. allConstruct the prototype of the methodItself isobject, it isObjectThis js comes with a constructorThe instance, except object.prototype.
  6. Object. The prototype. __prototype pointingnullAs aEnd of prototype chain.

Stern said

If you have any suggestions, please put forward, I will timely feedback, thank you.