Detailed explanation of prototypes and prototype chains in JavaScript

Prototype chain diagram

Essential knowledge for prototyping

To understand the prototype, you must understand three properties: __proto__ , prototype , and constructor .

1.__proto__ and constructor attributes are unique to objects;

2. The prototype property is unique to functions;

3. In js, functions are also a type of object, so functions also have properties __proto__ and constructor;

Five rules of prototype:

1. All reference types (objects, arrays, functions) have object characteristics, that is, they can freely extend properties

2. All reference types (objects, arrays, functions) have a __proto__ (implicit prototype) attribute, which is a normal object

3. All functions have a prototype (explicit prototype) property, which is also a normal object

4. All reference types (objects, arrays, functions) __proto__ values ​​point to the prototype of its constructor

5. When trying to get the property of an object, if the variable itself does not have this property, it will look for it in its __proto__

prototype property (display prototype)

First create a constructor

var Parent = function(){
}
//Define a function, it is just an ordinary function var p1 = new Parent();
//Through the keyword new, Parent becomes a constructor //Creates an instance of a Parent constructor p1

prototype is a unique property of the function, through which the prototype can be accessed;

prototype was originally designed to achieve inheritance, so that all instances created by a specific function can share properties and methods, or it can be said that all objects instantiated by a certain constructor can find common methods and properties. With prototype we don't need to create duplicate property methods for each instance. Instead, we create the property methods on the prototype object (prototype) of the constructor function. Those that do not need to be shared are created in the constructor.

Parent is the constructor, Parent.prototype is the prototype

The properties and methods added to Parent.prototype are called prototype properties and prototype methods, and instances of the constructor can access and call them.

proto property (implicit prototype)

The __proto__ property is unique to objects (including functions).

Every object has a __proto__ property, which points to the prototype object of the object.

p1.__proto__ === Parent.prototype; // true

__proto__ is usually called the implicit prototype, and prototype is usually called the explicit prototype. It can be said that the implicit prototype of an object points to the explicit prototype of the constructor of the object. Then the property methods defined on the explicit prototype are passed to the instance of the constructor through the implicit prototype. This way, the instance can easily access the methods and properties on the constructor prototype.

The implicit prototype of Parent.prototype points to the object prototype

Parent.prototype.__proto__ === Object.prototype; //true

This introduces the concept of prototype chain. When p1.toString() is called, it first searches the p1 object itself. If it is not found, it searches the prototype object Parent.prototype through p1.__proto__. If it is not found, it searches the parent prototype object Object.prototype through Parent.prototype.__proto__ . The toString method is found at this layer. Returns the method for use by p1.

Of course, if it is not found on Object.prototype, it will look for it in Object.prototype.__proto__ , but Object.prototype.__proto__ === null so it returns undefined. This is why when accessing a non-existent property of an object, undefined is returned.

The constructor property

Since the constructor function accesses the prototype through prototype, the prototype should also be able to access the constructor function through some means, which is the constructor.

As in the previous example, p1 is an object, and the constructor of p1 is Parent(). Parent's constructor is Function()

p1.constructor => f Parent{}
Parent.constructor => f Function() { [native code] }
Function.constructor => ƒ Function() { [native code] }

Function is the root constructor of all functions.

From the example, we can see that constructor property of p1 points to Parent, so Parent is the constructor of p1. Similarly, the constructor property of Parent points to Function, so Function is the constructor of Parent, and then it is verified that Function is the root constructor.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!