Detailed explanation of JavaScript inheritance method

There are six main inheritance methods:

1. Prototype chain inheritance has the problem of object sharing

2. Constructor inheritance is implemented with the call apply method: the function reusability problem is re-executed every time the parent class is instantiated. , methods in the parent class are repeatedly defined

3. Combination mode (prototype chain + constructor) constructor inheritance method, prototype chain inheritance method: solves object sharing, but attribute inheritance appears twice

4. Prototype method uses one Space empty function

5. Parasitic method: Additional methods are added to the prototype method

6. Parasitic combination method (solve the problem of attribute inheritance appearing twice)

1. Prototype chain method

The subclass inherits the parent class When , it is to point the prototype of the subclass to an instance object of the parent class. When a subclass is instantiated, all instances of the subclass will share the attributes and methods of the instance of the parent class (assumed to be called p). If there is a reference attribute on p, the instance of the subclass can modify the reference attribute. property, causing that property on other instances to be modified as well.

//原型链方式
function A(){
    this.name = 'lc';
    this.stus = ['a','b','c'];
}
A.prototype.introduce = function (){
    alert(this.name);
}
 
function B(){}
B.prototype = new A();
 
var s1 = new B();
var s2 = new B();
console.log(s1.stus);  //['a','b','c']  
s1.stus.push('d');     //改变s1上的属性，会影响s2上的该属性
console.log(s2.stus);  // ['a','b','c','d']

If it is changed to the following, it will not affect it.

//原型链方式
function A(){
    this.name = 'lc';
    this.stus = ['a','b','c'];
}
A.prototype.introduce = function (){
    alert(this.name);
}
 
function B(){}
B.prototype = new A();
 
var s1 = new B();
var s2 = new B();
 
s1.stus = ['d'];   //在s1上增加了属性，  就近原则，不在查找原型链上的同名属性
console.log(s1.stus);  //['d']
console.log(s2.stus);  // ['a','b','c']

2. Constructor method inheritance

Shared constructors and methods are all defined internally, so the issue of reusability of the reply function cannot be discussed.

//构造函数方式继承
function A(name){
    this.name = name;
    this.type = 'parent';
    this.introduce = function (){ alert(this.name);}
}
A.prototype.sayhi = function (){
    alert(this.type);
}
function B(name,age){
    A.call(this,name);  //使用call方法 实现继承 但是父类中的方法重复定义 无复用性
    this.age = age;
    this.introduce = function (){ alert(this.name+this.age);}
}
 
var b = new B('lc',25);
b.introduce(); //lc25
b.sayhi();  //parent

3. Mixed method (prototype method + constructor method)

Use the constructor to inherit properties and the prototype chain inheritance method

But there is a disadvantage: When using prototype chain inheritance, the properties are actually also inherited. repeated.

function A(name){
    this.name = name;
    this.type = 'parent';
}
A.prototype.sayhi = function (){
    alert(this.type);
}
function B(name,age){
    A.call(this,name);
    this.age = age;
    this.introduce = function (){ alert(this.name+this.age);}
}
B.prototype = new A();

4. Prototypal inheritance

uses an intermediate empty function to return an object after inheritance.

function extend(parent){
    function F(){}
    F.prototype = parent;
    return new F();
}

5. Parasitic inheritance On the basis of the prototype, add attribute methods to the object

function extend(parent){
    function F(){}
    F.prototype = parent;
    return new F();
}
 
function createObj(p){  
    var clone = extend(p);
    clone.name = 'hello';    
    clone.say = function (){}
    return clone;
}

6. Parasitic combined inheritance

When inheriting a method, the constructor of the parent type is no longer instantiated, but used inheritPrototype method. Use an intermediate empty function, let this empty function inherit the parent class prototype, and then instantiate this empty function (inheriting all methods in the parent class prototype). Just point the prototype of the subclass to this instantiated empty object.

Avoid instantiating the constructor of the parent class.

/* 寄生组合式继承 */
function inheritPrototype(subType, superType) {
  // var obj= extend(superType.prototype);
  function F(){}
  F.prototype = superType.prototype;
  var obj= new F();
 
  //obj.constructor = subType;
  subType.prototype = obj;    //不可将subType的prototype直接指向superType，否则的话，对子类prototype的修改会反应到父类上，  引用型变量
  subType.prototype.constructor = subType;
}

Object impersonation: Use a constructor to declare a class, point a class method to another constructor (because the constructor itself is a method function), and implement inheritance

function A(){
    this.name = {name1:'hello'};
    this.say = function (){ console.log(this.name);}
}
function B(){
    this.method = A;
    this.method();
    delete this.method;
}
 var bObj = new B();