How object-oriented implementations in JavaScript inherit

Inheritance, also not really strictly object-oriented inheritance, but through the prototype chain in JavaScript to implement the properties between functions, method sharing. Here's a simple way to share several packages.

Since we're talking about inheritance, we have to have a base class

1 2 3 4 5 6 7 8 9

function Person () { this. eat=function() { return ' eat food '; } } person.prototype.sport=function() { return ' movement '; }

Person this base class contains 2 properties, eat and exercise. But it's strange to define a property eat in a constructor (which is, of course, a simulation), and we assign a method to return to eating food.

Then a property sport is defined on the prototype of the person class, and a method is assigned to return the motion.

In fact, these 2 properties can all be placed in the constructor, or all defined on the prototype object, there is no problem, we are defined here just to demonstrate that the post-face class inherits the base class after the instantiation of the object can 100% inherit the base class defined in the 2 ways? Let's look at the following one by one examples.

(i) The first form of inheritance, in which the constructor binds

I'm going to define a subclass, student, let the student inherit, and bind the base class person in the student's constructor.

1 2 3 4

function Student (name) { person.apply (this, arguments); this. name=name; }

How to implement the binding is the application and call method in JavaScript, the 2 methods to achieve the same purpose, but the parameter format is different, see here call and apply implementation of the difference between the inheritance

I use JS Runner to illustrate, in order to print out under the tool, rewrite the print function:

1 2 3 4 5 6 7

var print=function(text) { var t='; for(item in arguments) { t+= arguments[item]+', '; } document.write (t+' <br/> '); }

You can not focus on this function, if you are in the Chrome console debugging, Mac option + command +i can fall out, with Console.log can output results.

The red box is the tool method, in order to print out in the issued, rewrite the Print method.

The blue box is the base class person

Green Box is subclass Student

The black box is the output statement, and the Name property and the study () method are defined by the subclass. There is no problem printing, the Eat () method is the base class definition, see inheriting the base class method, but the base class also has a prototype method of sport (), let's look at this method. Xiaoming.sport (), resulting in an error, as follows:

1	Typeerror:undefined is not a function (evaluating ' xiaoming.sport () ')

Here you see the disadvantage of the constructor binding, it is limited, in the subclass constructor binding the base class, can only inherit from the base class constructor definition properties, methods, for the base class prototype prototype object defined on the properties, methods can not be inherited by the quilt class.

(ii) Sub-class prototype inheritance base class

Or just an example, Student's prototype is student.prototype.

1	student.prototype=New Person ();

The meaning of this sentence is that the pointer to the class prototype refers to an instance of the base class. This also allows you to inherit the property methods of the base class.

There are 2 different places with the above figure, the red box is the subclass inheriting the base class, and the last 2 methods of the base class are printed.

Looks pretty good, the properties of the base class constructor and the properties on the base class prototype chain can all inherit.

(iii) Sub-class prototypes inherit base class prototypes

Similar to the above method, the difference is that the above base class object becomes the base class prototype.

The above picture and the first picture have 2 differences, the red box Student.prototype inherits the base class Person.prototype

The green box outputs all the properties of the subclass, but the method of the base class can be output only on the prototype, and we try to output xiaoming.eat (); Result Error:

1	Typeerror:undefined is not a function (evaluating ' xiaoming.eat () ')

When a subclass prototype inherits the base class prototype, the properties defined by the base class constructor are not inherited to the subclass.

How object-oriented implementations in JavaScript inherit