As an object-oriented weakly typed language, the inheritance is also one of the most powerful features of JS.
Since we want to implement inheritance, we first define a parent class:
Define an animal class function Animal (name) { //property this.name = name | | ' Animal '; Instance method This.sleep = function () { alert (this.name + ' is sleeping!) ');} } Prototype Method Animal.prototype.eat = function (food) { alert (this.name + ' is eating: ' + ');};
1. Prototype chain inheritance
Core: prototype An instance of a parent class as a child class
function Cat () {}cat.prototype = new Animal (); Cat.prototype.name = ' cat ';//Test Codevar cat = new Cat (); alert (cat.name); alert (cat.eat (' fish ')); alert (Cat.sleep ()); Alert (cat instanceof Animal); True alert (cat instanceof cat); True
Characteristics:
- A very purely inherited relationship, an instance of a subclass, and an instance of the parent class.
- The parent class adds a new prototype method/prototype property that the subclass can access to
Disadvantages:
- To add properties and methods to a subclass, you must
new Animal()
execute after such a statement and not put it in the constructor
- Unable to implement multiple inheritance
- The reference property from the prototype object is shared by all instances
- Cannot pass parameter to parent class when creating child class instance
2. Borrowing constructor inheritance
Core: Use the constructor of the parent class to enhance the subclass instance, which is equivalent to copying the instance property of the parent class to the subclass (useless to the prototype)
function Cat (name) { Animal.call (this); this.name = Name | | ' Tom '; Test Codevar cat = new Cat (), alert (cat.name), alert (Cat.sleep ()), alert (cat instanceof Animal); Falsealert (cat instanceof cat); True
Characteristics:
- Resolves an issue where subclass instances share parent class reference properties in 1
- When you create a child class instance, you can pass parameters to the parent class
- Multiple inheritance can be implemented (call multiple parent objects)
Disadvantages:
- The instance is not an instance of the parent class, just an instance of the child class
- Only instance properties and methods of the parent class can be inherited and cannot inherit the prototype properties/methods
- Function reuse is not possible, each subclass has a copy of the parent class instance function, which affects performance
3. Combination Inheritance
Core: by calling the parent class constructor, inheriting the properties of the parent class and preserving the advantages of the pass parameter, and then inheriting the parent class instance as a subclass prototype, inherits the properties and methods of the parents, implements the function reuse
function Cat (name) { Animal.call (this); this.name = Name | | ' Tom '; Cat.prototype = new Animal ();//Test Codevar cat = new Cat (); alert (cat.name); alert (Cat.sleep ()); alert (cat instanceof Anim AL); Truealert (cat instanceof cat); True
Characteristics:
- compensate for the defect in mode 2, can inherit instance properties/methods, or inherit prototype properties/Methods
- is both an instance of a subclass and an instance of the parent class
- There is no reference attribute sharing issue
- Can be passed the parameter
- Functions can be reused
Disadvantages:
- A two-time parent constructor was called, and two instances were generated (the subclass instance masks that portion of the subclass prototype) (consumes only a bit of memory)
4 prototype Inheritance
Core: Inheriting an existing object instead of a function
Performs a shallow copy function object (o) { function F () {} F.prototype = O on the incoming object; return new F (); Example var Animal = { name: "Cat", friend:["Aaron", "Cassic"]}var cat=object (Animal); cat.name= "SSS"; Cat.friend.push ("Aseaff"); alert (cat.name); alert (cat.friend);
Characteristics:
- There is no need to create a constructor, just to keep one object similar to another object
Disadvantages:
- As with prototype mode, property values that contain reference types are shared
5 Parasitic inheritance
The core is closely related to the prototype inheritance, just a lot of methods
Performs a shallow copy function object (o) { function F () {} F.prototype = O on the incoming object; return new F (); Enhanced Object function CreateObject (o) { var clone=object (o); Clone.sayname=function () { alert ("HI");}; return clone;} Example var Animal = { name: "Cat", friend:["Aaron", "Cassic"]}var cat=createobject (Animal); Cat.sayname ();
Characteristics:
- There is no need to create a constructor, just to keep one object similar to another object
- Compared to prototype inheritance, it has its own method.
Disadvantages:
- As with prototype inheritance, property values that contain reference types are shared
6. Parasitic combination inheritance
Core: by parasitic way, the instance property of the parent class is cut off, so that when two times the construction of the parent class is called, the two instance method/property is not initialized, the disadvantage of avoiding the combination inheritance
function Cat (name) { Animal.call (this); this.name = Name | | ' Tom '; (function () { //Create a class with no instance method var Super = function () {}; Super.prototype = Animal.prototype; Prototype the instance as a subclass Cat.prototype = new Super ();}) ();//Test Codevar cat = new Cat (); Console.log (cat.name); Console.log (Cat.sleep ()); Console.log (cat instanceof Animal); Trueconsole.log (cat instanceof cat); True
Characteristics:
- Perfect
Disadvantages:
- Achieve more complex
Several ways of JS inheritance