In-depth exploration of javascript prototype is not as simple as prototype inheritance page 1/3

1 What is prototype

The prototype property of an object in JavaScript can return a reference to the object type prototype. This is a rather difficult explanation. To understand it, you must first correctly understand the concept of object type (Type) and prototype.
We said earlier that the object's class (Class) and the object instance (Instance) is a "creation" relationship, so we regard "class" as a modeling of object features, while the object is a concreteization of class features, or in other words, class (Class) is a type of object (Type). For example, in the previous example, both p1 and p2 are both Point, which can be verified by the instanceof operator in JavaScript:
     p1 instanceof Point
        p2 instanceof Point

However, Point is not the only type of p1 and p2, because p1 and p2 are objects, so Obejct is also their type. Because Object is a more generalized class than Point, we say that there is a derivative relationship between Obejct and Point. Later we will know that this relationship is called "inheritance". It is also a special case of the generalized relationship between objects and a basic relationship that is indispensable in object-oriented.
In the object-oriented field, instances and types are not the only pair of descriptable abstract relationships. In JavaScript, another important abstract relationship is type (Type) and prototype (prototype). This relationship is a higher level of abstract relationship, which just forms a three-layer chain with the abstract relationship between types and instances.

In real life, we often say that something is created based on another thing. These two things can be of the same type or different types. The idiom "copy the gourd", the gourd here is the prototype, and the gourd is the type. It is used to express the JavaScript prototype to mean "Grao.prototype = a certain gourd" or "Grao.prototype= new Graodi()".
To understand prototypes in depth, you can study a design pattern about it - prototype pattern. The core of this pattern is to use prototype instances to specify the type of objects to be created, and to create new objects by copying these prototypes. JavaScript's prototype is similar to this method.

For detailed content about prototype pattern, please refer to "Design Patterns" ("Design Patterns"). It is not the scope of this article.

Note that the difference between the relationship between the same type and the instance is that the relationship between the prototype and the type requires that a type can only have one prototype at one moment (while an instance can obviously have multiple types at one moment). For JavaScript, this limitation has two meanings. The first is that each specific JavaScript type has and only one prototype. By default, this prototype is an Object object (note that it is not an Object type!). Second, the type to which this object belongs must be a type chain that satisfies the prototype relationship. For example, the types that p1 belong to are Point and Object, and an Object object is the prototype of Point. If there is an object whose types are ClassA, ClassB, ClassC and Object, then these four classes must be satisfied to form a complete prototype chain.
Interestingly, JavaScript does not specify the type of a type prototype (this is another very difficult word), so it can be any type, usually an object, so the object-type-prototype (object) may form a ring structure, or other interesting topological structures. These structures bring a variety of uses to JavaScript, some of which are not only clever but also full of aesthetics. The following section mainly introduces the usage of prototype.



2 Prototype usage tips

Before understanding the skills of using prototypes, you must first understand the characteristics of prototypes. First of all, JavaScript provides a prototype attribute for each type (Type). Point this attribute to an object, and the object becomes the "prototype" of this type, which means that all objects created by this type have the characteristics of this prototype. In addition, JavaScript objects are dynamic, and prototypes are no exception. Adding or decreasing properties to prototypes will change this type of prototype. This change will directly affect all objects created by this prototype, for example:

If a property named a is added to the prototype of the type of an object, and the object itself has an attribute of the same name named a, then when accessing the property a of this object, the property of the object itself "overwrites" the prototype attribute, but the prototype attribute does not disappear. When you use the delete operator to delete the property a of the object itself, the prototype attribute of the object will restore visibility. Using this feature, you can set default values ​​for the properties of an object, for example: