[JS] Inheritance Method Summary

Mode one: prototype chain inheritance (prototype Mode)

  
 

   
  

  
function Animal(){
   
  

  
 this.species = "动物";
   
  

  
}
   
  

  
function Cat(name,color){
   
  

  
 this.name = name;
   
  

  
 this.color = color;
   
  

  
}
   
  

  

   
  

  
Cat.prototype = new Animal();//核心
   
  

  
Cat.prototype.constructor = Cat;
  
 

Disadvantages:
1. The properties and methods of the reference type on the prototype are shared by all instances (personally think this should not be a disadvantage, after all, the prototype is to send this Use)
2. When you create an instance of cat, you cannot send a parameter to animal

Mode two: Classic Inheritance (constructor Binding)

  
 

   
  

  
function Animal(){
   
  

  
 this.species = "动物";
   
  

  
}
   
  

  
function Cat(name,color){
   
  

  
 Animal.call(this);//核心，或Animal.apply(this,arguments);
   
  

  
 this.name = name;
   
  

  
 this.color = color;
   
  

  
}
  
 

Advantages:
1. Avoid the properties and methods of reference types being shared by all instances, because they are useless to prototypes.
2. When you create an instance of cat, you can pass a parameter to the animal

Disadvantages:
1. Properties and methods are defined in the constructor, and each time an instance is created, the properties and methods are created

Way Three: combination inheritance (prototype chain inheritance and classic inheritance double Swords)

  
 

   
  

  
function Parent (name) {
   
  

  
 this.name = name;
   
  

  
 this.colors = [‘red‘, ‘blue‘, ‘green‘];
   
  

  
}
   
  

  

   
  

  
Parent.prototype.getName = function () {
   
  

  
 console.log(this.name)
   
  

  
}
   
  

  

   
  

  
function Child (name, age) {
   
  

  

   
  

  
 Parent.call(this, name);//核心
   
  

  

   
  

  
 this.age = age;
   
  

  

   
  

  
}
   
  

  

   
  

  
Child.prototype = new Parent();//核心
   
  

  

   
  

  
var child1 = new Child(‘kevin‘, ‘18‘);
   
  

  

   
  

  
child1.colors.push(‘black‘);
   
  

  

   
  

  
console.log(child1.name); // kevin
   
  

  
console.log(child1.age); // 18
   
  

  
console.log(child1.colors); // ["red", "blue", "green", "black"]
   
  

  

   
  

  
var child2 = new Child(‘daisy‘, ‘20‘);
   
  

  

   
  

  
console.log(child2.name); // daisy
   
  

  
console.log(child2.age); // 20
   
  

  
console.log(child2.colors); // ["red", "blue", "green"]
  
 

Advantages:
1. Fusion of the advantages of prototype chain inheritance and constructors by combining the benefits of prototype chain inheritance and constructor functions

Disadvantages:
1. Two calls to the parent constructor, adding additional, unwanted properties to the child.prototype, and destroying the prototype chain

Mode Four: Parasitic combination inheritance

  
 

   
  

  
function Parent (name) {
   
  

  
 this.name = name;
   
  

  
 this.colors = [‘red‘, ‘blue‘, ‘green‘];
   
  

  
}
   
  

  

   
  

  
Parent.prototype.getName = function () {
   
  

  
 console.log(this.name)
   
  

  
}
   
  

  

   
  

  
function Child (name, age) {
   
  

  
 Parent.call(this, name);//核心
   
  

  
 this.age = age;
   
  

  
}
   
  

  

   
  

  
Child.prototype = Object.create(Parent.prototype);//核心
   
  

  
Child.prototype.constructor = Child;
   
  

  

   
  

  
var child1 = new Child(‘kevin‘, ‘18‘);
   
  

  

   
  

  
console.log(child1)
  
 

Pros: on the basis of combination inheritance, avoid creating unnecessary and unnecessary attributes on Child.prototype. At the same time, the prototype chain remains intact, so instanceof and isprototypeof can be used Normally.

Reference Links:
Https://github.com/mqyqingfeng/Blog/issues/16
http://www.ayqy.net/blog/%E9%87%8D%E6%96%B0%E7%90%86%E8%A7%A3js%E7%9A%846%E7%A7%8D%E7%BB%A7%E6%89%BF%E6%96%B9%E5%BC%8F/
Http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html

[JS] Inheritance Method Summary