As a prototype of species-JS from the slash-and-burn era, THE prototype chain, I would say that I could not really digest it after watching the elevation more than three or five times, emmmmmm…… Don’t say, my generation be self-improvement, a word, be stem……

Let’s start with constructors

A few basic concepts

  1. Constructor: Normally it points to the object’s constructor, but this property can be easily changed if you override the constructor’s Prototype literal
Function F () {} var F = new F () f. onstructor = = = F / / pointing right now -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- a strong division -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- F.prototype = { ..... } F int === F // false;} F int == F // falseCopy the code
  1. Object has__proto__Properties, including functions, but only functions have the Prototype property, which exists when a function is defined

The constructor

function Foo () {
    this.num = 0
}
console.dir(Foo)
Foo.prototype.constructor === Foo // true
Copy the code

As you can see in the printed result, the Foo constructor has the prototype attribute, which contains the constructor and __proto__ attributes. Foo’s prototype property is its prototype object, and we can see that the function has a prototype property, which it was born with. Also note that the constructor of the prototype object (foo.prototype) points to the constructor itself.

One drawback of the new operator is that instance objects generated from constructors cannot share properties and methods. To address this problem, js designer Brendan Eich introduced the Prototype property for the constructor. Properties and methods that need to be shared can be put into the Prototype object, which is a complete “class” of JS.

prototype, __proto__

Foo.prototype.add = function (x) {
    this.num += x
}
console.dir(Foo)
var foo1 = new Foo()
console.log(foo1)
Copy the code

We mount an Add method on Foo’s prototype object and create an instance of it, foo1

Foo’s __proto__ property looks the same as Foo’s prototype. Check that Foo’s __proto__ property looks the same as Foo’s prototype

Equal, which means that the instance’s __proto__ will point to the protoobject of the constructor, which is foo1’s constructor, which is Foo, so the following two things are true.

foo1.constructor === Foo // true
foo1.__proto__ === foo1.constructor.prototype === Foo.prototype // true
Copy the code

When we call foo1.add(), foo doesn’t have add itself, but it uses Proto to find its prototype object, so it can use Add. What if Foo doesn’t have add on its prototype object? Foo as an object will also have its own__proto__Properties, by__proto__The property Foo has access to the prototype object of its constructor, along the way__proto__The chain mechanism of looking up layers is the prototype chain. Instance by__proto__A prototype object linked to its constructor, and the Foo function as an object will have its own__proto__Properties, all the way up.

As shown above, something like this, the chain will eventually point up to Object's prototype Object, and null will point upCopy the code

To summarize: Prototype has some shared methods in it, and JS implements prototype chains and object inheritance through __proto__ and Prototype

Function, Object relation

Functions such as String, RegExp, and Number inherit from Function

We know that Function is an object, and Objcet is a constructor

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

So who’s the boss? It’s too easy to get around.

In the ES specification, Function inherits Function itself and function. prototype inherits Object. Prototype

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

Function.__proto__ and Function. Prototype refer to the same Object. Prototype, which is at the top of the food chain.