A few years ago will bejsInheritance integration, but I do not know where I put the paper, so I plan to integrate again, put here will not be lost, convenient for me to review and consolidate.

Inheritance:

  1. Prototype chain inheritance
  2. Borrow constructor inheritance
  3. Combination of inheritance
  4. Primary inheritance
  5. Parasitic inheritance
  6. Parasitic combinatorial inheritance

Prototype chain inheritance

Basic idea: Use an instance of a parent class as a prototype for a subclass

Function SuperFun(){this.name = 'Super'; This. Colors = [' red 'and' blue ']} SuperFun. The prototype. The sayName = function (params) {the console. The log (enclosing name)} / / subclass function SubFun() { this.subName = 'Sub'; this.age = 18; } SubFun.prototype = new SuperFun(); SayAge = function (params) {console.log(params? Params :this.age)} // let instance = new SubFun(); Console. log(' inherited property of parent ', instance.name); // Inherit Super instance.sayage (); // 18 instance.sayName(); // Super instance.colors. Push ('yellow'); console.log('instance.colors', instance.colors); // instance.colors [ 'red', 'blue', 'yellow' ] let instance1 = new SubFun(); instance1.colors.push('black'); console.log('instance1.colors', instance1.colors); //instance1. Colors ['red', 'blue', 'yellow', 'black'] cannot implement multiple inheritance of instanceof SubFun; // true instance instanceof SuperFun; // true SubFun instanceof SuperFun; // false SubFun.prototype instanceof SuperFun; // true SubFun.prototype instanceof SubFun; // trueCopy the code

Features: Use stereotypes to make one reference type inherit the properties and methods of another

Advantages: Templates that inherit from the parent class also inherit from the parent class’s prototype object

Disadvantages:

  1. All properties from the stereotype object are shared by all instances
  2. Cannot pass arguments to the parent constructor when creating a subclass instance
  3. Multiple inheritance cannot be implemented
  4. You can add instance properties to a subclass instance in the subclass constructor. If you want to add stereotype properties and methods, you must add them in theSubFun.prototype = new SuperFun()After added.

Borrow constructor inheritance

Basic idea: Call the superclass constructor inside the subclass constructor

Function SuperFun(name){this.name = name; This. Colors = [' red 'and' blue ']} SuperFun. Prototype. SayName = function () {the console. The log (enclosing name)} / / subclass function SubFun ()  { SuperFun.call(this, 'Super'); This.age = 18; this.age = 18; } // let instance = new SubFun(); instance.colors.push('yellow'); console.log('instance.colors', instance.colors); // instance.colors [ 'red', 'blue', 'yellow' ] let instance1 = new SubFun(); instance1.colors.push('black'); console.log('instance1.colors', instance1.colors); // instance. Colors ['red', 'blue', 'yellow'] implements multiple inheritanceCopy the code

Advantages:

  1. You can pass arguments to the parent class
  2. Implement multiple inheritance (initialization code for all objects defined by subclass instances sharing the parent class)

Disadvantages:

  1. Only instance properties and methods of the parent class can be inherited, not stereotype properties and methods
  2. Function reuse is not possible, each subclass has a copy of the parent class instance function, affecting performance

Combination of inheritance

Basic idea: prototype chain inheritance and constructor sink together, so as to play an inheritance mode of both.

The prototype chain is used to inherit the attributes and methods of the prototype and realize function reuse. The inheritance of instance attributes by borrowing constructors ensures that each strength has its own attributes.

Function SuperFun(name){function SuperFun(name){this.name = name; this.colors=['red','blue']; } SuperFun. Prototype. SaySupName = function () {the console. The log (enclosing name)} / / subclass function SubFun (name, age) { SuperFun.call(this, name); This.age = age; this.age = age; this.age = age; } SubFun.prototype = new SuperFun(); / / to the parent class instance as a subclass prototype implementation function reuse (second call) SubFun. Prototype. The constructor = SubFun; // Constructor pointing to subfun.prototype. sayAge = function () {console.log(this.age); } let instance = new SubFun('xm', 18); instance.saySupName(); // xm instance.sayAge(); //18 instance.colors.push('yellow'); console.log('instance.colors', instance.colors); // instance.colors [ 'red', 'blue', 'yellow' ] let instance1 = new SubFun('sl', 20); instance1.saySupName(); // sl instance1.sayAge(); // 20 instance1.colors.push('black'); console.log('instance1.colors', instance1.colors); // instance. Colors ['red', 'blue', 'yellow'] implements multiple inheritanceCopy the code

Advantages:

  1. Instance properties and methods can be inherited
  2. You can also inherit the attributes and methods of the stereotype
  3. There is no application property sharing problem
  4. Parameters can be transmitted and reusable

Disadvantages:

  1. Call the parent dog twice in the function, generating two instances

Primary inheritance

This method does not use a strict constructor.

Basic idea: Prototypes allow you to create new objects based on existing objects without having to create custom types.

Primitive inheritance is essentially a shallow copy, copying a new object from a template and sharing attributes

function object( o ){ var G = function(){}; G.prototype = o; return new G(); } var obj = { name : 'ghostwu', age : 22, color: ['red'], show : function(){ return this.name + ',' + this.age; }}; var obj1 = object( obj ); obj1.color.push('blue'); console.log('obj1.color',obj1.color); //['red', 'blue'] var obj2 = object( obj ); obj1.color.push('yellow'); console.log('obj1.color',obj1.color); //['red', 'blue', 'yellow'] console.log('obj2.color',obj2.color); //['red', 'blue', 'yellow']Copy the code

In the object function, take the object O as the template, in the object function body, define a constructor, let the constructor’s prototype object (prototype) point to O, return an instance of the constructor, so that you can access all attributes and methods of the object O.

In ES5, primitive inheritance is normalized primarily through the object.creat () method. This method takes two parameters: an object to be the prototype for the new object and, optionally, an object to define additional properties for the new object.

The object.creat () and Object() methods behave the same when passed a parameter.

var obj = {
    name: 'gxm',
    color : ['red']
};
var obj1 = Object.create( obj );
obj1.color.push( 'yellow' );

var obj2 = Object.create( obj,{
    name:{
        value: 'xmz'
    }
} );
console.log(obj2.name,'---', obj2.color ); 
//xmz --- ['red','yellow']

var obj3 = Object.create( obj,{
    color:{value:['red','blue']}
} );
console.log(obj1.color,obj2.color,obj3.color );
// ['red','yellow'] ['red','yellow'] ['red','blue']

Copy the code

Parasitic inheritance

Parasitic inheritance encapsulates the original type inheritance again, extends the new method on the object, and returns the new object

var obj = { name: 'gxm', color : ['red'] }; function object(o) { var G = function () { }; G.prototype = o; return new G(); } function createAnother(original) { let clone = object(original); clone.sayHi = function(){ console.log('hi'); } return clone; } let anotherObj = createAnother(obj); anotherObj.sayHi(); // hiCopy the code

Parasitic combinatorial inheritance

In composite inheritance, when the parent constructor is called twice, the instance attributes of the parent class are parasitically cut off. In this way, when the constructor of the parent class is called twice, the two-instance method and instance attributes are not initialized, avoiding the disadvantages of composite inheritance.

Basic idea: Inherit instance properties by borrowing constructors and inherit stereotype methods through a hybrid form of stereotype chains

Function SuperFun(name){this.name = name; this.colors=['red','blue']; } SuperFun. Prototype. SaySupName = function () {the console. The log (enclosing name)} / / subclass function SubFun (name, age) { SuperFun.call(this, name); Age = age; this.age = age; this.age = age; } SubFun.prototype = Object.create(SuperFun.prototype); / / to the parent class instance as a subclass prototype implementation function reuse SubFun. The prototype. The constructor = SubFun; // Constructor pointing to subfun.prototype. sayAge = function () {console.log(this.age); } let instance = new SubFun('xm', 18);Copy the code

Advantages:

  1. Call twiceSuperFunConstructor that creates only one copy of the parent class attributes
  2. The prototype chain remains the same
  3. Normal useinstancofandisPrototypeOf

Parasitic combinatorial inheritance is the most effective way to realize type – based inheritance.

If there is an error, please leave a message, Thanks – (· ω ·) Blue