Easy Learning JavaScript 13: JavaScript based on object-oriented inheritance (including object-oriented inheritance mechanism)

One- phase object inheritance mechanism

Today is nothing to do, to understand the three major characteristics of object-oriented inheritance, the past learning C + + and C # are Orthodox object-oriented language

Words, the study time also did not have much in-depth understanding, just simple study the most basic inheritance. In the afternoon when looking at the inheritance mechanism, see a very classic

Instance of the inheritance mechanism. This example uses UML to explain the inheritance mechanism very well.

The simplest way to illustrate the inheritance mechanism is to use a classic example of geometric shapes. In fact, there are only two geometries, the ellipse (the circle

and polygons (with a certain number of edges). A circle is a type of ellipse that has only one focus. Triangles, rectangles, and Pentagon are all a kind of polygon,

Have a different number of edges. A square is one of the rectangles, and all sides are equal in length. This constitutes a perfect inheritance relationship, which is a good explanation of the object-oriented

The inheritance mechanism.

In this example, the shape is the base class of the Ellipse and the polygon (usually we can also call it the parent class, all classes inherit from it). The Ellipse has a

Properties (foci) that describe the number of focal points the ellipse has. The circle inherits the ellipse, so the circle is the subclass of the ellipse, and the ellipse is the super class of the circle. With

like, triangles, rectangles, and Pentagon are all subclasses of polygons, and polygons are their super-classes. Finally, the square follows the rectangle.

It is best to use diagrams to explain this inheritance relationship, which is where UML (Unified Modeling Language) comes in. One of the main uses of UML is to visually express the image of a

Inherit such a complex object relationship. The following illustration is a UML diagram that explains the relationship between a shape and its subclasses:

In UML, each box represents a class, which is described by the class name. The segments at the top of the triangles, rectangles, and Pentagon are brought together, pointing to the shape, indicating

These classes are inherited by shapes. Similarly, arrows that point to rectangles from squares illustrate the inheritance relationship between them.

The realization of the inheritance mechanism of the two ECMAScript

To implement the inheritance mechanism with ECMAScript, you can start with the base class that you want to inherit from. All developer-defined classes are available as base classes. For the safety of the original

Because local classes and host classes cannot be used as base classes, this prevents public access to compiled browser-level code, because the code can be used for malicious

Attack.

Once you have selected a base class, you can create its subclasses. It is up to you to use the base class. Sometimes, you might want to create a base that you can't use directly

Class, which is simply used to provide generic functions to subclasses. In this case, the base class is treated as an abstract class. Although ECMAScript is not like any other language,

The abstract class is strictly defined, but sometimes it does create classes that are not allowed to be used. In general, we call this class an abstract class.

The subclass you create inherits all the properties and methods of the superclass, including the implementation of constructors and methods. Remember that all properties and methods are common, because

This subclass can access these methods directly. Subclasses can also add new properties and methods that are not in the superclass, or override the properties and methods of the superclass. Since JS does not

Are Orthodox object-oriented languages, and some nouns also need to be changed.

Three ways of ECMAScript inheritance

The class (base class) that will be inherited in the ECMAScript language is called a superclass, and a subclass (or derived class) is called a subtype. As with other functions, ECMAScript

There is more than one way to implement inheritance. This is because the inheritance mechanism in JavaScript is not explicitly defined, but is implemented by imitation. This means that the

Some inheritance details are not handled entirely by the interpreter. As a developer, you have the right to decide on the most appropriate way to inherit. Here are a few specific examples of inheritance

Way.
(1) prototype chain mode

This form of inheritance was originally used for prototype chains in ECMAScript. The previous blog post has described how to prototype objects. The prototype chain expands

This way, the inheritance mechanism is implemented in an interesting way. The prototype object is a template, and the object to instantiate is based on this template. Total and

In other words, any properties and methods of the prototype object are passed to all instances of that class. The prototype chain uses this function to implement the inheritance mechanism. We

Take a look at an example:

function A () {//Super Type A must have no parameter    This.color = "Red";    This.showcolor = function () {       return this.color;    };}; Function B () {//Sub-type B    this.name = "John";    This.showname = function () {       return this.name;    };}; B.prototype = new A ();//subtype B inherits the super-type A, through the prototype, forms the chain var a = new A (), var b = new B ();d Ocument.write (A.showcolor ());//output: Bluedocum Ent.write (B.showcolor ());//output: Reddocument.write (B.showname ());//output: John

in the prototype chain, the instanceof operator is also unique in how it operates. For all instances of B, instanceof returns true for both A and B.

This is an extremely useful tool in ECMAScript's weakly-typed world, but it cannot be used when impersonating an object. For example:

var B = new B ();d ocument.write (b instanceof A);//output: Truedocument.write (b instanceof B);//output: True

Inheritance is implemented using a prototype chain, but this method cannot share and subtype pass parameters to super-type. We can borrow the constructor method (also

is to solve these two problems in a way like posing.

(2) How to impersonate an object

The way the object is impersonating is as follows: The constructor uses the This keyword to assign values to all properties and methods (that is, the constructor method that takes the object declaration).

Because the constructor is just a function, you can make the A constructor a method of B and then call it. b You will receive the properties defined in the constructor of a.

and methods. For example, rewrite the example above to create objects A and B in the following way:
1call () method

function A (Color) {//Create super-type a    this.color = Color;    This.showcolor = function () {          return this.color;    };}; Function B (color,name) {//create subtype B    A.call (this, Color);//object impersonating, giving the super-type parameter    this.name = name;//newly added property    This.showname =};var A = new A ("Blue"), var B = new B ("Red", "John");d Ocument.write (A.showcolor ());//output: Bluedocument.writ E (B.showcolor ());//output: Reddocument.write (B.showname ());//output: John

2apply () method

The only difference from the call () method above is the code in sub-type B:

A.call (this,arguments);//Object impersonating, to the super-type parameter

Of course, parameter objects can be passed only if the order of the parameters in the superclass is exactly the same as the order of the parameters in the subtype. If not, you must create

A separate array that places the parameters in the correct order.

Although the use of object impersonation method solves the problem of sharing and the transfer of parameters, but no prototype, reuse is more impossible, so we combine the above two

mode, that is, the prototype chain way and the object impersonating the way to achieve JS inheritance.

(3) Blending Mode

This inheritance uses constructors to define classes, not using any prototypes. The main problem with object impersonation is that you must use the constructor method, which is not

The best choice. However, if you use a prototype chain, you cannot use a constructor with parameters. How do developers choose? The answer is simple, both are used.

Because this hybrid uses the prototype chain, the instanceof operator can still run correctly.

In the previous blog post, the best way to create an object is to define a property with a constructor and define the method with a prototype. This approach also applies to inheritance mechanisms,

Use the object to impersonate an inherited constructor property, and use the prototype chain to inherit the method of the prototype object. Rewrite the previous example in either of these ways, with the following code:

function A (color) {    this.color = color;}; A.prototype.showcolor = function () {    return this.color;}; function B (color, Name) {    A.call (this, color);//Object impersonating    this.name = Name;}; B.prototype = new A ();//Use the prototype chain to inherit b.prototype.showname = function () {    return this.name;}; var a = new A ("Blue"), var B = new B ("Red", "John");d Ocument.write (A.showcolor ());//output: Bluedocument.write (B.showcolor ()) ;//output: Reddocument.write (B.showname ());//output: John

The way you inherit is associated with how you create an object, and the way you use inheritance is also a mixture of how the prototype chain and the object are impersonating. Use this

The hybrid approach avoids some unnecessary problems.

When you look at this blog post, you must look at the previous ways to create objects: easy to learn JavaScript 12: JavaScript based on object-oriented creation

Build objects (i) and easily learn JavaScript 12: JavaScript is based on object-oriented object creation (II). Then it should not be that difficult to understand,

JS Object-oriented concepts when we need to go back to understand.

Easy Learning JavaScript 13: JavaScript based on object-oriented inheritance (including object-oriented inheritance mechanism)