Implementing Inheritance in JavaScript

javascript| inheriting JavaScript scripting languages is a powerful object-oriented language. This article describes how to implement inheritance in JavaScript.

Prototype

JavaScript does not implement class inheritance, but it can be implemented through prototype. Each JavaScript class contains a prototype object that is first looked up from the current object when accessing the properties and methods of an object, or directly if the property is defined in the JavaScript class, otherwise, from the class's prototype object. If it is found, it is accessed directly from the prototype prototype object, and so on, the direct prototype object is empty. In other words, the current object inherits all the properties and methods of the prototype of the class in which it resides.

However, the prototype object belongs to a class, and a class can create multiple objects, so there is a difference between reading and writing when accessing inherited properties. When reading an inherited property, locate the property by following the steps described above, and when writing a property, the data is copied from the prototype to the current object, and when read again, the properties of the current object are accessed. This problem does not exist for the method.

Implementing inheritance

The prototype default type for JavaScript classes is the object class, so it can be said that all classes in JavaScript inherit from the object class. We can modify the prototype property of a class so that it points to a different object so that inheritance is implemented. There are usually two ways to implement inheritance:

• Modify the prototype property of a class to point to a parent class object
• Modifies the constructor property of a class's prototype object and assigns it a constructor for the parent class

The two implementations are basically the same, but there are some differences. Code Listing 1 takes the first approach, and listing 2 takes the second approach.

Define base class Shapefunction Shape (x, y) {this.x = X;this.y = Y;this.fromorigin = function () {//define method return Math.sqrt (This.x * . x + this.y * this.y);} /*shape.prototype.fromorigin = function () {return math.sqrt (this.x * this.x + this.y * this.y) can be used in this manner; *///defines subclasses circlefunction Circle (x, Y, R) {Circle.prototype.constructor (x, y);//Invoke Parent constructor THIS.R = r;} Circle.prototype = new Shape (); Bind parent object//test var c = new Circle (5, 5);p rint (c); c.x = 3; Modify the Property C.y = 4;print (c);//Printing function print (c) {document.write ("circle.prototype.x=" + circle.prototype.x, "<br/> ");d ocument.write (" circle.prototype.y= "+ circle.prototype.y," <br/> ");d ocument.write (" c.x= "+ c.x," <br/ > ");d ocument.write (" c.y= "+ c.y," <br/> ");d ocument.write (" c.r= "+ C.R," <br/> ");d ocument.write (" C.fromorigin () = "+ C.fromorigin ()," <br/> ");} Listing 1: Modifying the prototype property of a class

Output results;

Circle.prototype.x=5circle.prototype.y=5c.x=5c.y=5c.r=10c.fromorigin () =7.0710678118654755circle.prototype.x= 5circle.prototype.y=5c.x=3c.y=4c.r=10c.fromorigin () =5

In the code above, pass Circle.prototype = new Shape (); Binds the parent object, and the Circle object contains all the properties and methods of a shape.

In the first output, we created a circle object that called the constructor of the parent shape in the circle constructor, thus initializing x and Y in shape. When accessing c.x, the actual access to the Circle.prototype refers to the X of the Shape object.

In the second output, we modified the x and Y of the Circle object, The X and y of the Circle.prototype Reference shape object are copied to the Circle object, and modifications to the Circle object do not affect the Circle.prototype referenced Shape object.

The Fromorigin method can be specified either in the constructor of the shape or in Shape.prototype.

//define base class Shapefunction Shape (x, y) {this.x = X;this.y = Y;this.fromorigin = function () {//define method return Math.sqrt (This.x * This.x + this.y * this.y);} This is not the way to/*shape.prototype.fromorigin = function () {return math.sqrt (this.x * this.x + this.y * this.y);} *///defines subclasses circlefunction Circle (x, Y, R) {Circle.prototype.constructor (x, y);//Invoke Parent constructor THIS.R = r;} Circle.prototype.constructor = Shape; The binding prototype constructor is the shape (x, y)//test var c = new Circle (5, 5);p rint (c); c.x = 3; Modify the Property C.y = 4;print (c);//Printing function print (c) {document.write ("circle.prototype.x=" + circle.prototype.x, "<br/> ");d ocument.write (" circle.prototype.y= "+ circle.prototype.y," <br/> ");d ocument.write (" c.x= "+ c.x," <br/ > ");d ocument.write (" c.y= "+ c.y," <br/> ");d ocument.write (" c.r= "+ C.R," <br/> ");d ocument.write (" C.fromorigin () = "+ C.fromorigin ()," <br/> ");//document.write (Circle.prototype instanceof Object); Listing 2: Modifying the constructor property of a class's prototype object 

The output of Listing 2 is the same as that shown in Listing 1.

In the code above, pass Circle.prototype.constructor = Shape; The constructor for the bound prototype is shape (x, y).

The Fromorigin method can only be specified in the constructor of the shape, not in Shape.prototype. The reason is Circle.prototype.constructor = Shape; Only the specified Circle.prototype constructor, the type of the Circle prototype object has not changed and is still the object type, so the method bound in Shape.prototype is not visible to circle.

Conclusion

JavaScript is an object-oriented language, although it does not seem obvious on the surface (where the top-level functions belong to the global object). We can implement inheritance through the prototype of JavaScript classes, which refer to the two methods and their nuances.

Resources

David Flanagan, Javascript:the definitive Guide, 4th Edition, O ' Reilly, 2001.