Creation and inheritance of JS class

If you want to know js Class creation and inheritance , We need to master js Prototype and prototype chain .
1. A brief introduction
js Prototype ：
JavaScript Regulations , Every function has a prototype Object properties , It points to another object （ On the prototype chain ）.prototype All properties and methods on , Will be inherited by an instance of the constructor . We can put invariable public properties and methods , Directly defined in prototype Object properties .

Prototype chain ：
Connection between instance object and prototype , It's called the prototype chain .
__ proto __（ Implicit connection ） Attribute is an implicit attribute of every object and function . For each contains __proto__ attribute , What he points to is the one who created his constructor prototype. The prototype chain is built through this attribute .

function Pro() {
    
  //...
}
var pro = new Pro();

among Pro There is prototype attribute , and pro No, , But in pro It's implicit in __proto__ Attribute points to Pro.prototype.
That is to say ：

pro.__proto__ === Pro.prototype; //true

__proto__ Attribute is an implicit attribute of every object and function . For each contains __proto__ attribute , What he points to is the one who created his constructor prototype. The prototype chain is built through this attribute .

function A() {
    
}
function B() {
    
}
var a1 = new A();
B.prototype = a1;
var b1 = new B();

It can be found in a chain ：

b1.__proto__ === a1; //true
b1.__proto__.__proto__ === A.prototype; //true
b1.__proto__.__proto__.__proto__ === Object.prototype; //true

2. Class creation （es5）
First new One function, In this function Of prototype Add properties and methods to .
Create a Animal class ：

// Define an animal class 
function Animal(name) {
    
	this.name = name;  // attribute 
	this.sleep = function() {
       // Example method 
		console.log(this.name + 'sleep...');
	}
}
// Add a prototype method to the prototype chain 
Animal.prototype.eat = function(food) {
    
	console.log(this.name + 'eat...' + food)
}

3. Class inheritance

• Prototype chain inheritance ：

Prototype chain inheritance is JavaScript The main way to implement inheritance . Use prototypes to let one reference type inherit the properties and methods of another .

// Create an empty object 
function Cat() {
    
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
var cat = new Cat;

It can be observed through the console ：

Print cat Object finds that its instance inherits Animal Properties and methods of .
characteristic ： Based on prototype chain , Is an instance of a parent class , Is also an instance of a subclass .
shortcoming ： Multiple inheritance cannot be implemented .

• Construct inheritance ：

Use the constructor of the parent class to enhance the child class instance , Equal to Copy The instance attribute of the parent class is given to the child class （ No prototypes ）.

function Cat() {
    
    Animal.call(this);
    this.name = name || 'cat';
}
var cat = new Cat();

Console observation ：

You can see that the attributes from the parent class are inherited (name) And methods (sleep()), But there is no method defined on the prototype chain eat(). Further verify ：

characteristic ： Multiple inheritance can be realized .
shortcoming ： Only the properties and methods of the inherited parent class can be implemented , Cannot inherit properties and methods on the prototype chain .

• Combination inheritance ：
  It is equivalent to a combination of construction inheritance and prototype chain inheritance . Construct... By calling the parent class , Inherit the properties of the parent class and keep the advantages of passing parameters , Then by using the parent instance as the child prototype , Realize function reuse .

function Cat() {
    
    Animal.call(this);
    this.name = name || 'cat';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
var cat = new Cat();

Console output , By comparing the previous introduction Prototype chain inheritance The console output , It is obvious that it calls two parent class constructors .

shortcoming ： Called the parent constructor twice , Two examples have been generated .

• Parasitic combination inheritance ：
  It can be said to be the optimization of composite inheritance . By parasitizing , Cut off the instance properties of the parent class , such , When calling the construction of the parent class twice , The instance will not be initialized twice .

function Cat() {
    
    Animal.call(this);
    this.name = name || 'cat';
}
(function() {
    
    // Create an empty object 
    var Super = function() {
    };
    // Prototype instances as subclasses 
    Super.prototype = Animal.prototype;
    Cat.prototype = new Super();
}) ()
var cat = new Cat();

Console output ：

---

Continuous updating ...