JavaScript Inheritance Method (1)

Some time ago, I wrote the class method of JSOO. From this article, let's look at the Inheritance Method of JSOO. Most object-oriented languages Support inheritance. The most important advantage of inheritance is code reuse to build large-scale software systems. If a class can reuse the attributes and methods of another class, it is called inheritance. SyntaxHighlighter. all ();

Some time ago, I wrote the JS OO class method. From this article, let's look at the Inheritance Method of JS OO.

Most object-oriented languages Support inheritance. The most important advantage of inheritance is code reuse to build large-scale software systems. If a class can reuse the attributes and methods of another class, it is called inheritance. From this perspective, let's look at the JS inheritance method. The Inheritance Method in JS is closely related to the writing method. Different writing methods lead to different inheritance methods. The inheritance methods for various popular JS libraries are also different. Start with the simplest reuse.

 

1. Write a class by using the constructor. Copy the attributes/fields of the parent class to the subclass for inheritance.

Here, the parent class and child classes are written in the constructor mode, and no prototype is required. The subclass calls the parent class function to copy the attributes of the parent class.

View sourceprint? 01 /**

02 * parent Polygon: Polygon

03 * @ param {Object} sides

04 */

05 function Polygon (sides ){

06 this. sides = sides;

07 this. setSides = function (s) {this. sides = s ;}

08}

09

10 /**

11 * subclass Triangle: Triangle

12 */

13 function Triangle (){

14 this. tempfun = Polygon; // a property of tempfun assigned to the subclass by the parent class reference

15 this. tempfun (3); // call

16 delete this. tempfun; // delete this attribute

17 this. getArea = function (){};

18}

19

20 // new objects

21 var tri = new Triangle ();

22 console. log (tri. sides); // inherited attributes

23 console. log (tri. setSides); // inherited method

24 console. log (tri. getArea); // Method

25

26 // The disadvantage is that it is false when instanceof is used as the parent class Polygon for the Triangle instance object.

27 console. log (tri instanceof Triangle); // true

28 console. log (tri instanceof Polygon); // false

Because JavaScript has multiple calling methods for the name function, subclasses can also implement the following methods. The method for calling the parent class in the subclass is different.

View sourceprint? 01 function Triangle (){

02 Polygon. call (this, 3); // call the parent class

03 this. getArea = function (){};

04}

05 function Triangle (){

06 Polygon. apply (this, [3]); // use the apply method to call the parent class

07 this. getArea = function (){};

08}

09 function Triangle (){

10 var temp = new Polygon (3); // The new method calls the parent class

11 for (maid) {// copy all to the subclass

12 this [recognition] = temp [recognition];

13}

14 this. getArea = function (){};

15}

The disadvantage of this method is that it is always false when the subclass instance object uses instanceof to check the parent class. This is against the inheritance of "is a" in java.

 

2. Prototype writing class, prototype inheritance

Core JS's own object system is inherited by prototype based. Or core JS does not use a common class-based system, but uses prototype inheritance to implement its own object system. In our work, we can also use prototype to implement inheritance, and code reuse is used to build our own functional modules.

View sourceprint? 01 /**

02 * parent Polygon: Polygon

03 *

04 */

05 function Polygon (){}

06 Polygon. prototype. sides = 0;

07 Polygon. prototype. setSides = function (s) {this. sides = s ;}

08

09 /**

10 * subclass Triangle: Triangle

11 */

12 function Triangle (){}

13 Triangle. prototype = new Polygon (); // This is the key to prototype inheritance.

14 Triangle. prototype. getArea = function (){}

15

16 // new objects

17 var tri = new Triangle ();

18 console. log (tri. sides); // inherited attributes

19 console. log (tri. setSides); // inherited method

20 console. log (tri. getArea); // self-owned Method

21

22 // instanceof Test

23 console. log (tri instanceof Triangle); // true, indicating that the object is a Triangle

24 console. log (tri instanceof Polygon); // true, indicating that the triangle is also a Polygon

Although the output shows that the subclass inherits the property sides and method setSides of the parent class Polygon, but the sides is 0, how can it be a triangle. You have to call tri. setSides (3) to make it a triangle. This seems inconvenient. Parameters cannot be passed, which is the disadvantage of prototype. The advantage is that the "is a" relationship is correctly maintained.

 

3. Composite constructor/prototype writing class, inherited using the previous method

In this way, the attributes of the parent class are all attached to the constructor, and the methods are all attached to the prototype.

View sourceprint? 01 /**

02 * parent Polygon: Polygon

03 */

04 function Polygon (sides ){

05 this. sides = sides;

06}

07 Polygon. prototype. setSides = function (s) {this. sides = s ;}

08

09 /**

10 * Triangle

11 * @ param {Object} base

12 * @ param {Object} height

13 */

14 function Triangle (base, height ){

15 Polygon. call (this, 3); // copy the attributes of the parent class to yourself.

16 this. base = base;

17 this. height = height;

18}

19 Triangle. prototype = new Polygon (); // copy the parent class method to yourself.

20

21 Triangle. prototype. getArea = function () {// finally define your own Method

22 return this. base * this. height/2;

23}

24

25 // new objects

26 var tri = new Triangle (12, 4 );

27 console. log (tri. sides); // inherited attributes

28 console. log (tri. setSides); // inherited method

29 console. log (tri. base); // attributes

30 console. log (tri. height); // attributes

31 console. log (tri. getArea); // self-owned Method

32

33 // instanceof test, indicating that the "is a" relationship is correctly maintained

34 console. log (tri instanceof Triangle); // true, indicating that the object is a Triangle

35 console. log (tri instanceof Polygon); // true, indicating that the triangle is also a Polygon