This is the 4th day of my participation in the August More Text Challenge

The prototype

JavaScript is often described as a prototype-based language — one prototype object per object

When it tries to access an object’s properties, it searches not only for that object, but also for that object’s prototype, and the prototype of that object’s prototype, working its way up until it finds an attribute with a matching name or reaches the end of the prototype chain

To be precise, these properties and methods are defined on prototype properties above the Object’s constructor functions, not on the instance Object itself

Here’s an example:

Functions can have attributes. Each function has a special property called prototype

function doSomething(){}

console.log( doSomething.prototype );
Copy the code

Console output

{
    constructor: ƒ doSomething (),__proto__: {

        constructor: ƒ Object(),

        hasOwnProperty: ƒ hasOwnProperty (),isPrototypeOf: ƒ isPrototypeOf (),propertyIsEnumerable: ƒ propertyIsEnumerable (),toLocaleString: ƒ toLocaleString (),toString: ƒ toString (),valueOfƒ valueOf()}}Copy the code

The object above is what we call a prototype object

As you can see, the prototype object has its own property constructor, which points to the function, as shown in the following diagram

Prototype chain

A stereotype object may also have a stereotype from which it inherits methods and properties, layer by layer, and so on. This relationship, often referred to as the Prototype chain, explains why one object has properties and methods defined in other objects

Establish a link between the object instance and its constructor (which is the __proto__ property, derived from the constructor’s prototype property), and then find those properties and methods in the constructor by going up the prototype chain

Here’s an example:

function Person(name) {
    this.name = name;
    this.age = 18;
    this.sayName = function() {
        console.log(this.name); }}Copy the code

Step 2 Create an instance

var person = new Person('person')
Copy the code

Based on the code, we get the following figure

Here’s an analysis:

  • The Person constructor has the prototype object Person.prototype

  • The constructor generates the instance object Person, whose __proto__ points to the constructor Person prototype object

  • Person.prototype.__proto__ points to the built-in Object because Person.prototype is an Object that is created as a class by default by the Object function, while Object.prototype is the built-in Object

  • Person.__proto__ points to the built-in anonymous Function, because Person is a Function object, created by default by Function as a class

  • Function.prototype and function. __proto__ both point to the built-in anonymous Function, so that the end of the prototype chain is null

conclusion

Let’s start with a few concepts:

__proto__ acts as a bridge between different objects, pointing to the prototype object on which its constructor was created

Each object’s __proto__ refers to its constructor’s prototype object

person1.__proto__ === Person.prototype

Copy the code

A constructor is a Function object that is generated through the Function constructor

Person.__proto__ === Function.prototype
Copy the code

The prototype Object itself is an ordinary Object, and the constructors of ordinary objects are all Objects

Person.prototype.__proto__ === Object.prototype
Copy the code

As mentioned above, all constructors are Function objects, and Function objects are generated by Function constructs

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

Prototype objects of Object also have a __proto__ attribute pointing to NULL, which is the top of the prototype chain

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

The following is a summary:

  • All objects inherit from Object objects, which inherit directly from null

  • All Function objects (including Object objects) are inherited from Function objects

  • Object objects inherit directly from Function objects

  • The __proto__ of a Function Object points to its own prototype Object and ultimately inherits from Object