Inheritance plays a very important role in JS, and there are many ways of inheritance in JS. But the pros and cons are different.

Es5 inheritance

1. The implementation of inheritance first requires a parent class. In JS, there is no concept of a class, but in ES6, class is like a class, but in fact, es5 syntax sugar.

Enclosing name = name | | this. Annie / / instance methods sleep = function () {the console. The log (enclosing name + sleeping ')}} / / prototype method performance. The prototype, eats = function(food){console.log(this.name + 'eating:' + food); }Copy the code

2. Prototype chain inheritance

Sleep =function(){console.log(this.name+"is sleeping")} Child. Prototype = new Parent("yzh") // To avoid breaking the prototype chain, The Child pointed to Male's constructor itself. The prototype. The constructor = Child Child. The prototype. Sleep = function () {the console. The log (enclosing the name + "is sleeping") } Parent.prototype.eat=function(){ console.log(this.name+" is eating") } var child=new Child() console.log(Child)Copy the code

2. The advantages and disadvantages of

Advantages: 1. Simple and easy to implement, the new instance of the parent class and attribute subclass can access disadvantages: 1. It is possible to add instance attributes to subclasses, but to add new stereotype attributes and methods you need to implement multiple inheritance after the new parent constructor 2. When creating a subclass instance, you cannot pass arguments to the superclass constructorCopy the code

Constructor inheritance

steps

1. Execute the parent class’s constructor in the subclass’s constructor and bind this to it.

2. Change the direction of this by calling () and have the parent class constructor attach member attributes and methods to this of the subclass.

Function Father(name,age){// Father constructor is the parent of this.name = name; this.age = age; This. Say = function(){console.log(' every day '); }} // Constructor inheritance, A subclass inherits no properties and methods in the superclass prototype Father. Prototype. SetNames = function () {the console. The log (' on the prototype method ')} function Childs (name, age, sex) {/ / The Childs constructor executes the parent constructor and binds the child's this so that attributes in the parent class can be assigned to the child's this Father. Call (this,name,age); // The subclass inherits the attribute this.sex = sex; // Subclasses can have their own unique attributes} var f1 = new Father(' dika ',100); Var c1 = new Childs(' Monkey King ',20,70);Copy the code

2. The advantages and disadvantages of

Advantages: 1 Avoid sharing a stereotype instance and pass arguments to the parent constructor. Disadvantages: 1. Does not inherit methods from the parent class prototype.Copy the code

Combination of inheritance

steps

1. It is the combination of structural inheritance and prototype chain inheritance.

function Father(name,age){ this.name = name; this.age = age; } Father.prototype.greeting = function(){ console.log('nice meeting you'); } function Childs(name,age,sex){ Father.call(this,name,age); this.sex = sex; } Childs.prototype = new Father(); Childs.prototype.student = function(){ console.log('Goodbye'); } var c1 = new Childs(' Childs ',30,80); console.log(Childs.prototype); console.log(c1.__proto__); console.log(c1); c1.greeting(); c1.student();Copy the code

2. The advantages and disadvantages of

Advantages: 1 The constructor is executed twice each time a subclass instance is created (father.call () and new Father()). Disadvantages: 1. Combinatorial inheritance retains the advantages of prototype chain inheritance and structural inheritance, and avoids their disadvantages.Copy the code

Parasitic inheritance

steps

1. Object or some information creates an object, enhances the object, and returns the object.

Parasitism (o){function parasitism(O){}; Father.prototype = o; return new Father; } function Childs(o){ var consp = parasitism(o); consp.say = function(){ console.log('hello'); } return consp; } Person = {name:' Childs ', age:101} Person = Childs(Person); console.log(c1); console.log(c1.name); console.log(c1.age); c1.say();Copy the code

2. The advantages and disadvantages of

Advantages: 1 Resolves the disadvantages of composite inheritance in which the constructor is executed twice for every instance of a subclass. He has all the flaws of archetypal inheritanceCopy the code

Parasitic combinatorial inheritance

  1. Use parasitic inheritance to inherit the stereotype of a supertype.
  2. Assign the result to the stereotype of the subtype.
function Father(name){ this.name = name; } Father.prototype.getName=function(){ console.log(this.name); } function transcript(son,father){ function F(){}; F.prototype = father.prototype; var prototype = new F; prototype.constructor = son; son.prototype = prototype; } function Childs(name,age){ Father.call(this,name); this.age = age; } // A transcript(Childs,Father) is not used unless a method is defined on Childs' prototype. Childs.prototype.getAge=function(){ console.log(this.age); } var c1 =new Childs(' Childs ',108); console.log(c1); c1.getName(); c1.getAge();Copy the code

2. The advantages and disadvantages of

Advantages: 1 Set the advantages of parasitic inheritance and combined inheritance, the most effective way to achieve basic type inheritance. Disadvantages: 1. Call father once, and avoid creating unnecessary attributes on son.prototype, while keeping the prototype chain unchanged.Copy the code

Understanding This object

1. This always refers to the direct caller of the function (not the indirect caller)

2. If there is a new keyword, this refers to the object that comes out of new. In the event, this refers to the object that triggered the event.

3. In particular, this in attachEvent in IE always refers to the global object Window