The Deep exploration of JavaScript prototype is not a prototype inheritance so simple 1th/3 page _javascript Tips

Source: Internet
Author: User
Tags inheritance
1 What is prototype

The prototype property of an object in JavaScript that returns a reference to the object type prototype. This is a rather awkward explanation, and to understand it, the concept of object type (type) and prototype (prototype) should be understood first.
Before we say, an object's class and object instance (Instance) is a "create" relationship, so we think of "class" as a model of the object's characteristics, and the object is considered to be an embodiment of a class feature, or a class is a type of object (type). For example, in the previous example, the types of P1 and P2 are point, and in JavaScript, this can be verified by the instanceof operator:
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 it is, so we say that there is a kind of derivation between the obejct, and then we know that, This kind of relation is called "inheritance", it is also a special case of the generalization relation between objects, and it is an indispensable basic relation in object oriented.
In the object-oriented domain, instances and types are not unique pairs of abstract relationships that can be described, and in JavaScript, another important abstract relationship is type and prototype (prototype). This relationship is a higher level of abstraction, which happens to form a three-layer chain with the abstract relationship between type and instance.

In real life, we often say that something is created with another thing as a prototype. These two things can be of the same type, or they can be of different types. Idiom "according to gourd painting ladle", the gourd here is the prototype, and the scoop is the type, with JavaScript prototype to say is "scoop." prototype = some gourd "or" scoop. Prototype= new Gourd ().
To understand the prototype in depth, we can study a design pattern of--prototype pattern, the core of which is to use the prototype instance to specify the type of object to create, and to create new objects by copying these prototypes. The prototype of JavaScript is similar to this way.

The details of prototype pattern can be referred to as "design mode" ("Designing Patterns") it is not the scope of this article.

Note that unlike the relationship between the type and the instance, the relationship between the stereotype and the type requires that a type can have only one prototype at a time (while an instance can obviously have multiple types at one time). For JavaScript, this restriction has two layers of meaning, the first is that each specific JavaScript type has and has only one prototype (prototype), which, by default, is an object (note that it is not the object type!). )。 Second, the type that this object belongs to must be a chain of types that satisfies the prototype relationship. For example, the type that P1 belongs to is point and object, and an object is the prototype of point. If there is an object that belongs to the type ClassA, CLASSB, CLASSC, and object, then the four classes must be satisfied to form a complete prototype chain.
Interestingly, JavaScript does not specify the type of stereotype of a type (which is a very awkward word), so it can be of any type, usually an object, so that the object-type-prototype (object) may form a ring-like structure, or some other interesting topology, These structures provide a variety of uses for JavaScript, some of which are ingenious and aesthetically pleasing. The following section focuses on the use of prototype.



2 Prototype Use Tips

Before you understand the prototype skills, first understand the characteristics of prototype. First, JavaScript provides a prototype attribute for each type (type), which points to an object, which becomes the "archetype" of this type, meaning that all objects created by this type have the characteristics of this prototype. In addition, the JavaScript object is dynamic, and the prototype is no exception, adding or decreasing attributes to the prototype will change this type of prototype, which will directly affect all objects created by the prototype, such as:
<script> function Point (x,y) {this.x = x; This.y = y; var p1 = new Point (1,2); var P2 = new Point (3,4); point.prototype.z = 0; The dynamically-point prototype adds attribute alert (P1.Z); alert (P2.Z); All objects created by the point type at the same time </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

If a property named A is added to the prototype of an object, and the object itself has a property named a with the same name, the property of the object itself "overrides" the prototype property when accessing the object's property A, but the prototype property does not disappear. When you delete the property A of the object itself with the delete operator, the object's prototype property is restored to visibility. With this feature, you can set default values for the properties of an object, such as:
<script> function Point (x, y) {if (x) this.x = x; if (y) this.y = y; } point.prototype.x = 0; point.prototype.y = 0; var p1 = new Point; var P2 = new Point (1,2); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Current 1/3 page 123 Next read the full text

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.