Note several inheritance methods:

The parent class:

/ / define a Animal function Animal (name) {/ / attribute this. Name = name | | 'Animal'; This.sleep = function(){console.log(this.name + 'sleeping! '); } // animal.prototype. eat = function(food) {console.log(this.name + 'eating:' + food); };Copy the code

Prototype-chain inheritance, constructor inheritance, combinatorial inheritance (a combination of the first two), prototype inheritance, parasitic inheritance, parasitic combinatorial inheritance

Prototype chain inheritance:

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true
Copy the code

Create a new instance of cat as the prototype object of the subclass. Disadvantage: since the prototype object of cat refers to the instance of the parent class, all subclasses share the same prototype object, which is the new instance of Animal

Constructor inheritance:

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
Copy the code

Can implement multiple inheritance (call multiple constructors) Disadvantages: Can’t inherit properties on the stereotype

Combination of inheritance

This is a combination of approach 1 and approach 2, using call to inherit constructor properties on the one hand and using instances to inherit properties in the stereotype chain on the other

function Cat(name){ Animal.call(this); this.name = name || 'Tom'; } Cat.prototype = new Animal(); // Composite inheritance also needs to be fixed to the constructor point. Cat.prototype.constructor = Cat; // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // true console.log(cat instanceof Cat); // trueCopy the code

(1) Multiple instances use the same stereotype. (2) The contents of the constructor are copied twice

Primary inheritance

This method is an inheritance method. It does not use constructors strictly. It uses prototypes to create new objects from existing objects without specifying objects to inherit from common custom types such as Object.create (). Attributes that can be inherited from constructors and stereotypes are inherited in this way in vue source code (I think so).

var person = { 
 name: 'Jiang', 
 friends: ['Shelby', 'Court'] 
} 
var anotherPerson = Object.create(person) 
console.log(anotherPerson.friends) // ['Shelby', 'Court']
Copy the code

The second argument to object.create() defines some custom properties in the same format as the second argument to Object.defineproperties (). Inheritance is implemented.

var person = { name: 'Jiang', friends: ['Shelby', 'Court']} var anotherPerson = object.create (person, { name:{ value:'xff' } }) console.log(anotherPerson.name) //xffCopy the code

Parasitic inheritance

Parasitic inheritance is the same idea as primitive inheritance, which is similar to the parasitic constructor and factory pattern, creating a function that encapsulates the inheritance process only. This function internally enhances the object in some way. Finally, the object is returned.

Function createAnother(o) {var clone = object.create (o) // create a clone Object. SayHi = function() {console.log('hi') } var person = {name: 'Jiang'} var anotherPeson = createAnother(person) anotherpeson.sayhi ()Copy the code

A new object, anotherPeson, is returned based on Person, which not only has the Attributes and methods of Person, but also has its own sayHi method. This is a useful pattern in cases where objects are primarily considered rather than custom types and constructors.

Parasitic combinatorial inheritance

This kind of inheritance is the most recommended for constructor inheritance and in the combination pattern that I talked about, you have to call the superclass constructor twice a constructor and an instance and at that point I was thinking, Why would you instantiate one? Why don’t you just point your subclass’s prototype object directly to your parent’s prototype object, but that’s not going to work, it’s going to be shared. So the correct way is to make a copy of the parent class’s prototype object, and then implement the new object from the child class’s prototype, and then perform the following association. Perfect!! To cite an example of the official inheritance mode: developer.mozilla.org/zh-CN/docs/…

// Shape - superclass function Shape() {this.x = 0; this.y = 0; Function (x, y) {this.x += x; // function(x, y) {this.x += x; this.y += y; console.info('Shape moved.'); }; // Rectangle - subclass (subclass) function Rectangle() {shape.call (this); Rectangle. Prototype = object.create (Shape. Prototype); // Rectangle. Rectangle.prototype.constructor = Rectangle; var rect = new Rectangle(); console.log('Is rect an instance of Rectangle? ', rect instanceof Rectangle); // true console.log('Is rect an instance of Shape? ', rect instanceof Shape); // true rect.move(1, 1); // Outputs, 'Shape moved.'Copy the code

Using a constructor to inherit an instance of the constructor and creating a new object based on the prototype of the parent constructor as the prototype object of the subclass constructor

Rectangle. Prototype = object.create (Shape. Prototype); Rectangle.prototype.constructor = Rectangle;Copy the code

That completes inheritance, and that’s the best way to do it! Reference from: www.cnblogs.com/humin/p/455… www.jb51.net/article/117…