preface

Some of the images in this article come from understanding constructor, Prototype, __proto__, and prototype chains in your own way

1. Functions are objects

Keep in mind that the constructor property of any reference type (which is a pointer) points to its constructor. Note that the constructor property is in the prototype object

// Create a functionfunction Person(name) {
    this.name = name
}

console.log(Person.constructor) // [Function: Function]
console.log(Function.constructor) // [Function: Function]
console.log(Object.constructor) // [Function: Function]
Copy the code

The above code creates a Person function, from which we can see: (1).person is declared as a function, which can be seen from the output of person. constructor. The Function Function is the constructor of the Person Function (2). The Function Function is the constructor of its own (3). The Function Function is also the constructor of built-in objects like Object

According to these three points, we can sum up as follows: in JS, a Function is an instance object of a Function, that is, a Function is an object. It’s almost as if:

// Use the Function constructor to create a Function object. This is because the functions generated this way are anonymous, and the object model is generated only when they are actually called. var Person = new Function('... ')
Copy the code

2. What is Contructor

The previous section said that all reference types have a constructor property, which (as a pointer) points to its constructor

Here’s an example:

// Create a Person constructorfunction Person() {} // instantiate the objectlet person1 = new Person()
let person2 = new Person()
Copy the code

The following diagram shows the direction of constructor:

We already know that the object’s constructor property points to its constructor, so we can think of it this way: Person1 and person2 are instances of Person objects whose constructor points to the constructor that created them, i.e. the Person Function (2).Person is a Function but also a Function instance object. Its constructor points to the constructor that created it, the Function Function (3). As for the Function Function, which is a built-in JS object, we learned in section 1 that its constructor is itself, so its constructor property points to itself

Here’s an example:

// Create a constructorfunctionPerson(name) {this.name = name} // Instantiate the objectlet uzi = new Person('uzi') 

Person.a = 1
console.log(uzi.constructor.a) // 1

Function.b = 2
console.log(Person.constructor.b) // 2
Copy the code

So the constructor property is simply the property that holds its own constructor reference.

3. Understand prototypes and prototype chains

First, keep a few points in mind: (1). All reference types have a __proto__ (implicit stereotype) attribute whose value is a generic object (2). All functions have a prototype attribute whose value is a normal object (3). All reference types have a constructor property, which (as a pointer) points to its constructor (4). The __proto__ attribute of all reference types points to the prototype of its constructor

Let’s verify this separately, for example:

// Create a constructorfunctionPerson(name) {this.name = name} // Instantiate the objectlet uzi = new Person('uzi')
Copy the code

(1). All reference types have a __proto__ attribute, so both Person and uzi have _proto_ attributes.

(2). Only function objects have the prototype property, so only Person has the prototype property.

The.uzi object’s constructor property points to its constructor

__proto__ === Person. Prototype

So far, all four of the above conclusions have been verified. Keep reading.

What is a prototype object? Person. Prototype is a prototype object. We add an attribute to the Person.prototype object

Person.prototype.job = 'ADC'
Copy the code

By default, all prototype objects automatically get a constructor property, which points to the function (Person) where the Prototype property is located. As shown, the prototype object has the attributes we added and the default constructor attribute:

Now go back to this code:

// Create a constructorfunctionPerson(name) {this.name = name} // Instantiate the objectlet uzi = new Person('uzi') 
Copy the code

When creating a Person function, JS automatically adds the Prototype property to Person, which defaults to an object with the constructor property. When we create the instantiation object uzi by calling Person as a constructor (called with the new keyword), the uzi instance inherits all of the constructor’s prototype properties and methods by setting its _proto_ to point to the constructor’s prototype.

Print the Person:

If you print the uzi, you can see that the uzi inherits the job attribute from Person.prototype:

__proto__ === Person.prototype, now we know the simple relationship that when an object calls a property or method that doesn’t exist on its own, it will first look up its __proto__ constructor’s prototype, Prototype job = Person. Prototype job = Person. Prototype job

Let’s see if we can find the sex property, as shown below:

Now, what if you can’t find person. prototype?

Person.prototype is an object with a reference type, so it has a __proto__ attribute. __proto__ : person.prototype.prototype.__proto__ : person.prototype.__proto__ : person.prototype.__proto__ If so, what does person.prototype. __proto__ point to?

Earlier we said that the __proto__ constructor property of uzi (instance object) points to the Person (constructor), uzi.__proto__ === Person.prototype. __proto__ constructor points to Object (because the function is an Object), Prototype: person.prototype. __proto__ refers to object. prototype.

__proto__ (Object. Prototype) {person.prototype. __proto__ (Object. Prototype) {person.prototype. __proto__ (Object

To verify this, we set Object.prototype.sex = ‘male’

Uzi. Sex:

It can now be concluded that: When an object calls a property or method that doesn’t exist on its own, it looks first at its __proto__, the prototype of its constructor. Prototype = null; prototype = null; prototype = null; prototype = null; prototype = null;