Prototype and prototype chain

preface

I've seen a lot of in-depth understanding of the prototype chain series. Generally, I understand a lot, but it's not thorough enough! The following is a personal summary and understanding only.

First seen nouns

First of all, we must understand these words:
Function, constructor, function prototype (instance prototype), instance, instance object, object prototype, prototype, prototype, proto,constructor

Let's start with the following example:

function Person() {

}
function Foo() {

}
const foo = new Foo();
const person = new Person();

Function, constructor: in the above example, the constructor is Person

Function prototype (instance prototype): it will be described later in combination with the formula. (as I understand it, it is the initial function whose properties are used by all functions)

Instance and instance object: in the above example, there are constructors person and foo. We instantiate foo instance object and person instance object with new operator

Prototype object and prototype: it will be described later in combination with the formula.

prototype

Any constructor will have a prototype attribute. Print constructor foo prototype,Person.prototype you'll find

console.log(Foo.prototype,Person.prototype);
//{ constructor: f Foo(), __proto__: Object } { constructor: f Person(), __proto__: Object }

Foo.prototype,Person.prototype they all point to the prototype objects of their respective functions

a) Any constructor function (Person, Foo) has a prototype attribute, which points to the prototype object of this function

From the printed formula

{ 
  constructor: f Foo(),
  __proto__: Object 
} 
{ 
constructor: 
  constructor: f Person(),
  __proto__: Object 
}

It's not hard to see person Prototype and foo Prototypes have constructor s and__ proto__ Properties.

And person prototype. Constructor and foo prototype. Constructors all point to the respective constructors themselves.

It can be verified by the following formula:

console.log(Person.prototype.constructor === Person) // true
console.log(Foo.prototype.constructor === Foo) // true

b) The constructor of the prototype of the constructor refers to the constructor itself

So person prototype.__ proto__ And foo prototype.__ proto__ To what?

console.log(Person.prototype.__proto__ === Object.prototype) // true
console.log(Foo.prototype.__proto__ === Object.prototype) // true

Person in the above formula prototype.__ proto__ And foo prototype.__ proto__ All point to object prototype

c) Person. The prototype of prototype points to object prototype

In other words, the prototype of each function is an instance of Object, so Object What about the prototype of prototype, foo from new, and the prototype of person?

console.log(foo.__proto__);//{ constructor: f Foo(), __proto__: Object } 
console.log(person.__proto__);//{ constructor: f Person(), __proto__: Object }
console.log(Object.prototype.__proto__);//null

It's not hard to see

console.log(foo.__proto__===Foo.prototype);//true
console.log(person.__proto__===Person.prototype);//true
console.log(Object.prototype.__proto__===null);//true

d) foo,person's__ proto (prototype of instance) = = = person prototype; So put person Prototype is called instance prototype.

e) Person. prototype. Proto (prototype of instance prototype) = = = object prototype; Therefore, the prototype of the instance prototype points to object prototype.

f) Object.prototype.proto (prototype of Object.prototype) = = = null; So object prototype. The value of proto is null, that is, object Prototype has no prototype.

Take down the Chinese formula of item b above (B. the constructor of the prototype of the constructor is the constructor itself)

console.log(Person.prototype.constructor === Person) // true
console.log(Foo.prototype.constructor === Foo) // true

Then Object prototype. Is the constructor the Object itself?

console.log(Object.prototype.constructor===Object)//true

g) Object.prototype.constructor === Object

From this, the relationship diagram of big man surprised feather is clear

Prototype chain

From the above analysis, we can see that the prototype chain is actually running const foo = new Foo() statement (when creating instance function), which produces a chain reaction. The top of the prototype chain is object prototype.__ proto__ null.

Summary: look up the associated object (prototype object) that constructs the instance from an instance object, and the associated object (prototype object) passes__ prototo__ Property and then look up to create its prototype object, and so on until object The prototype object of prototype is null.

Prototype chain is through prototype and prototype of prototype__ proto__ To complete the search of prototype chain.

Prototype and prototype chain

Tags: Javascript

Posted by Chief on Fri, 29 Apr 2022 17:57:37 +0300