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

1. What is prototype?

The prototype attribute of the object in JavaScript, which can return the reference of the Object Type prototype. This is a pretty straightforward explanation. To understand it, you must first correctly understand the concepts of object types and prototypes.
As we mentioned above, the Class of an object and the Instance of an object are a "creation" relationship. Therefore, we regard the Class as a modeling of object features, objects are treated as concrete features of classes, or classes are a Type of objects ). For example, in the previous example, the p1 and p2 types are both Point. In JavaScript, The instanceof operator can verify this Point:
P1 instanceof Point
P2 instanceof Point

However, Point is not the only type of p1 and p2, because p1 and p2 are both objects, so Obejct is also their type, because Object is a more generalized class than Point, so we say, there is a derivative relationship between Obejct and Point. We will know later that this relationship is called "inheritance" and it is also a special case of the generalized relationship between objects, it is an indispensable basic relationship in object-oriented systems.
In the Object-Oriented field, instances and types are not the only one pair of descriptive abstract relationships. In JavaScript, another important abstract relationship is Type) and prototype ). This relationship is a high-level abstract relationship. It Exactly forms a three-tier 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 items can be of the same type or different types. The idiom "depends on the gourd painting". Here the gourd is the prototype, while the gourd is the type. It is represented by the prototype in JavaScript. prototype = a gourd "or" gourd. prototype = new gourd ()".
To thoroughly understand the prototype, you can study a design pattern of prototype pattern. The core of this pattern is to use the prototype instance to specify the type of the object to be created, and create new objects by copying these prototypes. The prototype of JavaScript is similar to this method.

For more information about prototype pattern, see Design Patterns.

Note that the relationship between the same type and the instance is different, the relationship between a prototype and a type requires that one type can only have one prototype at a time point (while an instance can obviously have multiple types at a time point ). For JavaScript, this restriction has two meanings. The first is that each specific JavaScript type has only one prototype. By default, this prototype is an Object (note that it is not of the Object Type !). Second, the object type must be a type chain that satisfies the prototype relationship. For example, p1 belongs to the type of Point and Object, while an Object is a prototype of Point. If an Object belongs to the following types: ClassA, ClassB, ClassC, and Object, the four classes must constitute a complete prototype chain.
Interestingly, JavaScript does not specify the type of a prototype (which is a very colloquial term), so it can be any type, usually an object. In this way, object-type-prototype (object) may constitute a ring structure or other interesting topology structures. These structures provide a wide variety of usage for JavaScript, some of these uses are both clever and aesthetic. The following section describes how to use prototype.



2 prototype usage tips

Before learning how to use prototype, first understand the features of prototype. First, JavaScript provides a prototype attribute for each Type, pointing this attribute to an object, and this object becomes a prototype of this Type ", this means that all objects created by this type have the characteristics of this prototype. In addition, JavaScript objects are dynamic, and prototype is no exception. Adding or decreasing properties to prototype will change the prototype, this change will directly apply to all objects created by this prototype, for example:

[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
If a property named a is added to the prototype of an object and the object itself has an attribute of the same name as a, When you access attribute a of this object, the property of the object overwrites the prototype property, but the prototype property does not disappear. When you delete attribute a of the object using the delete operator, the object's prototype property restores visibility. With this feature, you can set the default value for the object property, for example:

[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]