This is the 26th day of my participation in the August Text Challenge.More challenges in August

Ancestral prototype chain diagram

Let’s start with a chain of ancestral prototypes. Is that familiar? Let’s play this diagram for a moment and introduce a few important concepts before explaining it

The first important concept

Before introducing prototype chains, we introduce three concepts through an example: instance objects, constructors, and prototype objects

function Foo(name) {
    this.name = name
}
​
const f1 = new Foo('zs')
Copy the code

  • Instance object: from the constructor new, in this case f1, has a __proto__ attribute

  • Constructor: Foo (which is normal if you don’t use the new operator), has a prototype property

  • Prototype object: The new operator generates an object (capable of generating a bridge connection object and a constructor). Here is an associated formula, which is important:

    • Instance object__proto__Properties and constructorsprototypeProperty points to the same stereotype object
    • f1.__proto__ === Foo.prototype  // true
Copy the code

The above ancestral pictures will be expanded around this one law!! So this law is very important, is familiar with the prototype chain basic necessary knowledge!! (Do I show the importance of this law??)

Second important concept

Functions are objects, all functions are objects, function Object(), function Foo(), function function (), and a series of other functions are both objects and functions! This means that functions also have the __proto__ attribute of instance objects, which can be inferred from the constructor Function

All functions are function. prototype, including Object and Function. Remember that functions are also objects

Foo.__proto__ === Function.prototype    // true
Object.__proto__ === Function.prototype // true
Function.__proto__ === Function.prototype // true
Copy the code

The third concept

Prototype (Foo. Prototype, Function. Prototype) is also an object (Foo. Prototype).

As you already know, since objects are created by the Object constructor, the prototype Object is object.prototype. Foo. Prototype, Function. Prototype’s __proto__ attribute points to Object.prototype

Then the following rules emerge

Foo.prototype.__proto__ === Object.prototype // true
Function.prototype.__proto__ === Object.prototype   // true
Copy the code

Fourth concept

Prototype. Object. Prototype is null, and there is no prototype above that. (If you need to find a property on the object and it is not there, return undefined)

So here’s the rule

Object.prototype.__proto__ === null // true
Copy the code

summary

There are the most important hand tore ancestral prototype chain diagram that on tomorrow to explain it!! 😂

Surely, what can be improved that also welcomes ✍