This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August

This article mainly introduces the JS implementation of object-oriented inheritance of 5 ways, combined with the example form analysis of JavaScript object-oriented inheritance function of 5 common implementation method principle and operation skills, need friends can refer to:

1. Implement inheritance with constructors

function Parent1() { this.name = 'Parent1'; } parent1.prototype. say = function() {console.log(' hello '); } function Child1() { Parent1.call(this); / /!!!!!! This. Type = 'child1'; } let s1 = new Child1(); console.log(s1); s1.say(); // An error is reported hereCopy the code

Parent1.call() mounts Parent1’s this to Child1 instance by calling (apply) in a different context

Disadvantage 1: Property methods on the Parent1 prototype chain will not be inherited.

2. Use prototype chain inheritance

function Parent2() { this.name = 'parent2'; This. Arr = [1, 2, 3]; } function Child2() { this.name = 'child2' } Child2.prototype = new Parent2(); Let s2 = new Child2(); let s3 = new Child2(); Console. log(s2.arr, s3.arr) // [1,2,3] [1,2,3]Copy the code

As above, the key is to point the prototype of Child2 to an instance of Parent2

Drawback 1: All instances of Child2 are of the same stereotype. Changing one of them will change the other instances

For example, add another sentence at the top

s2.arr.push(4); console.log(s2.arr, s3.arr); / / [1, 2, 3, 4] [1, 2, 3, 4]Copy the code

As you can see, if you modify the ARR attribute of S2, the s3 instance also changes

3. Combinatorial inheritance (solve shortcomings 1 and 2 above)

Function Parent3() {this.name = 'Parent3 '; This. Arr = [1, 2, 3]; } function Child3() { Parent3.call(this); this.name = 'child3' } Child3.prototype = new Parent3(); let s4 = new Child3(); let s5 = new Child3(); S4. Arr. Push. (4) the console log (s4. Arr, s5. Arr) / / [1, 2, 3, 4] [1, 2, 3]Copy the code

Drawback 3: The Parent3 constructor is executed each time Child3 is instantiated,

4. Optimization of combinatorial inheritance 1

function Parent4() { this.name = 'parent4'; This. Arr = [1, 2, 3]; } function Child4() { Parent4.call(this); this.name = 'child4' } Child4.prototype = Parent4.prototype; / /!!!!!! Let s6 = new Child4(); let s7 = new Child4(); s6.arr.push(4) console.log(s6.arr, s7.arr)Copy the code

Disadvantage 4: It is impossible to distinguish whether instances are directly instantiated from Child4 or Parent4

console.log(s6 instanceof Child4, s6 instanceof Parent4); Console. log(s6.constructor, s7.constructor); / / are Parent4Copy the code

5. Combinatorial inheritance 2

function Parent5() { this.name = 'parent5'; This. Arr = [1, 2, 3]; } function Child5() { Parent5.call(this); this.name = 'child5' } Child5.prototype = Object.create(Parent5.prototype); / /!!!!! Let s8 = new Child5(); let s9 = new Parent5(); console.log(s8 instanceof Child5, s9 instanceof Child5); // true, false console.log(s8.constructor, s9.constructor); / / are.. Parent5.Copy the code

The key is to construct an intermediate Object with object.create to distinguish between objects

Disadvantages: Both constructor still point to Parent5

You can manually set the parameters as follows

Child5.prototype.constructor = Child5;
Copy the code