What is a prototype

Whenever a new function is created, a prototype property is created for that function according to a specific set of rules. This property refers to the function’s prototype object

So let’s verify that only functions have the Prototype attribute

function Person () {};
const str = '';
const num = 1;
const u = undefined;
const n = null;
const o = {};
const b = true;

console.log(Person.prototype) //Person {}
console.log(str.prototype) //undefined
console.log(num.prototype) //undefined
console.log(u.prototype) //Cannot read property 'prototype' of undefined
console.log(n.prototype) // Cannot read property 'prototype' of undefined
console.log(o.prototype) //undefined
console.log(b.prototype) //undefined
Copy the code

Prototype (‘ Person{} ‘, ‘Person{}’, ‘Person{}’, ‘Person{}’, ‘Person{}’, ‘Person{}’, ‘Person{}’)

Person. Prototype. name = 'front-end' let foo = new Person() console.log(foo.name) // front-endCopy the code

The instance has no prototype property, so how does it find name

console.log(foo.prototype) // undefined
console.log(foo.prototype == Person.prototype) // false
Copy the code

__proto__

The answer is a lookup through __proto__

console.log(foo.__proto__) // Person { name: 'front-end'} console.log(foo.__proto__. Name) // front-end console.log(foo.__proto__ === person.prototype) //trueCopy the code

Ok, so from the above code we can conclude that every constructor has a prototype attribute, and every instance has a __proto__ attribute. __proto__ in the instance will be equal to prototype in the constructor. Ok, so we can draw a diagram

constructor

Does a stereotype have a property pointing to a constructor or instance? The answer is yes. The property is constructor

console.log(Person.prototype.constructor === Person)// true
console.log(Person.prototype.constructor === foo.constructor)// true
Copy the code

Where the constructor word comes from in this example may be in question, but we’ll get to that later

Well, now that the constructor and instances and the relationship between the prototype, then we say that the instance and the prototype, the relationship between the when you look for in the instance of an attribute or method, if not defined in the constructor, then instance will to prototype lookup, if still not found in the prototype, it will to look up to the prototype of the prototype, If no trace is found, null is returned, for example:

Person.prototype.name = 'person'
let foo = new Person()
foo.name = 'foo'
console.log(foo.name) //foo
delete foo.name
console.log(foo.name) //person
Copy the code

When you create an instance and add a name to the instance, the first lookup will return foo, and when you remove the name and look it up again, the instance itself doesn’t have a name, so it will look up the prototype and return Person, and what if the prototype doesn’t have a name either

delete Person.prototype.name
console.log(foo.name) //undefined
Copy the code

If the prototype is not found, we will look for the prototype of the prototype, so what is the prototype of the prototype? It is also an object, Obeject, so the diagram above can be modified

console.log(Person.prototype.__proto__ === Object.prototype)

If you’re not sure if the top layer is Object, delete person. name and insert object.prototype. name == ‘Object’ and console.log(foo.name) to see what happens

Prototype chain

Finally what is the prototype chain, actually has the answer above, instance to find from the prototype, did not find will find prototype prototype, a series of operations, in fact already constitutes the prototype chain, until the final Object, then that is the top of the prototype chain is null, let us verify

console.log(Object.prototype.__proto__ === null) // true

Ok, concluded that ended here, but there is a problem above the console. The log (Person. The prototype. The constructor = = = Person. The constructor) / / true, instance constructor is where come of? It should be clear from this point that the constructor attribute is not present in the instance; it is just retrieved from the prototype

console.log(person.constructor === Person.prototype.constructor) // true
console.log(Person.prototype.constructor === Person) // true
console.log(person.constructor === Person) // true
Copy the code

That’s pretty much the end of it