"JavaScript"--object-oriented inheritance

Inheritance is a relatively central concept in object-oriented. Other Orthodox object-oriented languages implement inheritance in two ways: one is an interface implementation and one is inheritance. ECMAScript only supports inheritance, does not support interface implementations, and implements inheritance in a way that relies on the prototype chain. In JavaScript inheritance, there are several types of inheritance, can be said to accompany the emergence of the problem, the method of inheritance has also been upgraded, not only the prototype chain inheritance, but also the combination of inheritance, prototype inheritance, parasitic inheritance, parasitic combination inheritance and so on. They are accompanied by the emergence of different problems, I would describe the following separate ways to inherit.

1, prototype chain-type inheritance

<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >function Box () {//box Construction this.name = ' Beauty ';} function Desk () {//desk construct this.age = 100;} Desk.prototype = new Box (); Desk inherits Box, through prototypes, to form the chain var Desk = new Desk (); alert (desk.age); alert (desk.name); Get inherited attributes </span>

Cons: The initial value of the prototype chain inheritance instantiation is the same, cannot be changed, and cannot be reused, combining inheritance (prototype chain + borrowing constructors) to solve this problem.

2. Combination Inheritance (prototype chain + borrowing constructor)

<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >function Box (age) {this.name=[' Lin Chi-ling ', ' Fan Bingbing '];this.age=age;} The Age of Box.prototype.run=function () {return this.name+ ' is ' +this.age;} function Desk (age) {Box.call (this,age);                           Object impersonation, where the function is to pass parameters, only the method and properties in the instance of box are passed to desk (), the information in the prototype is not passed. }//var desk=new desk;//alert (desk.name+ ' Are you all right??? ');                Return  to Lin Chi-ling here, Fan Bingbing How are you??? The reason is that the desk () function internally uses an object impersonation. Alert (Desk.run ());                                 The run () method is not inherited if the prototype chain inheritance is not set. Desk.prototype=new Box ();                            Use the prototype chain to inherit all the information from the prototype and instance of box () to desk () var desk=new desk; alert (desk.name+ ' How you doing??? ');                  Back  to Lin Chi-ling, Fan Bingbing you all right??? Alert (Desk.run ());                                  Back  to Lin Chi-ling, Fan Bingbing's age is 20</span>

The combination of inheritance makes up the problem of the prototype chained inheritance and sharing, but the disadvantage is that every time an instance of an object is instantiated, it takes two calls to the superclass box (). This problem can be solved by parasitic combination inheritance. Parasitic combination inheritance One will say, first of all, the prototype inheritance.

3. prototype-Type Inheritance

<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >//function obj (o) {//pass a literal function F () {}//Create a constructor f.prototype = O;//assign a literal function to the prototype of the constructor return new F ();//finally return the instantiation The constructor of}var box = {///literal object name: ' Lee ', arr: [' elder brother ', ' sister ', ' sister ']         //Add an array when the reference type};var box1 = obj (box);               Pass alert (box1.name);                   return leebox1.name = ' Jack ';              Change name to Jackalert (box1.name);                  Return to Jackalert (Box1.arr); Box1.arr.push (' parents ');            The Arr property is an array where you add more parents to the array. alert (Box1.arr); var box2 = obj (box);  Pass alert (box2.name);      Return to Lee, not Jack, between subclasses, value types are not shared. alert (Box2.arr);           return brother, Sister, sister, parent, subclass, reference type shared. </span>

This inheritance uses prototypes and creates new object instances based on existing objects without having to create custom types (you don't have to add properties and methods yourself).

4. Parasitic inheritance (prototype Inheritance + Factory method mode)

<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >function obj (o) {function F () {}f.prototype=o;return new F ();} function Create (o) {f=obj (O) f.run=function () {return this.family;} return F;} var box={name: ' Lin ', age:22,family:[' reference type 1 ']}var box1 = create (box); Pass alert (box1.name);           Inherited is the box object, output Lin Box1.name= ' Liu Yifei ';     Change the Name property in your own instance to Liu Yifei, changing the subtype of Namealert (box1.name);          Output Liu Yifei alert (Box1.run ());            The output is a reference type 1,box1.family.push (' Reference type 2 ');//The output is reference type 1, reference type 2, change is a super-type Familyalert (Box1.run ()), var box2 = create (box);  Pass alert (box2.name);            The box object is inherited, and the output Lin does not output Liu Yifei alert (Box2.run ());  </span>

Parasitic inheritance combines the prototype + factory model to encapsulate the process of creating objects.

5. When the parasitic combinatorial inheritance resolves multiple instances, the problem of super-class is called multiple times.

<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >//relay function, obj (o) {function F () {}f.prototype=o;return new F ();} Parasitic functions function Create (Box,desk) {f=obj (box.prototype);      Here is the box of the prototype object F.constructor=desk;          Adjust the prototype pointer desk.prototype=f;} function Box (name,age) {this.name=name;this.age=age;} Box.prototype.run=function () {return this.name+this.age;} function Desk (name,age) {box.call (this,name,age);     Object impersonating a call, which is also the function of passing parameters. }//inherits Create (Box,desk) by parasitic combination;   Replace Desk.prototype=new Box (), var  desk=new desk (' Belle ', ') alert (Desk.run ());//Return Beauty,25</span>

Summary

These kinds of inheritance are all introduced, I just understand the fur, but they really in the project, even if only in the exercise project will find, now say what is mouth bashi, and then there is true bashi before, these theoretical knowledge is also very necessary, let the project re-sublimation of these several inheritance way!

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

"JavaScript"--object-oriented inheritance