"Defects" of prototype chain inheritance and constructor inheritance

Let's start with object-oriented , Ben Gua thinks ： object-oriented programming , Its greatest power is ： Reuse ！

We often say , Three characteristics of object oriented , encapsulation 、 Inherit 、 polymorphic .

These three characteristics , With “ Inherit ” At the core . Encapsulation into classes , To inherit , After inheritance, we will develop ourselves （ rewrite ）, It can be understood as polymorphism . therefore , The fundamental purpose is to inherit , namely “ Reuse “！

If you use  JavaScript  The ability of object-oriented programming , Can think of , Only for use ：

Based on prototypes

.

Because this language is designed like this , We also mentioned before ：JavaScript The language design of is mainly influenced by Self（ A prototype based programming language ） and  Scheme（ A functional programming language ） Influence ;

Its reusability comes from the prototype ！

Okay , There is this cognitive foundation , Let's look at prototype inheritance .

Prototype chain inheritance

The most direct implementation of prototype inheritance is ： Prototype chain inheritance

ECMA-262  The prototype chain is defined as  ECMAScript  The main way to inherit . The basic idea of inheritance is to refer to multiple attributes .

Let's look at the code implementation of prototype chain inheritance ：

function SuperType() {
 this.property = true;
}
function SubType() {
 this.subproperty = false;
}

SuperType.prototype.getSuperValue = function() {
 return this.property;
};
SubType.prototype.getSubValue = function () {
 return this.subproperty;
};

SubType.prototype = new SuperType(); //  Yes  SubType  The prototype chain is reassigned , Is the prototype chain inheritance
let instance = new SubType();

console.log(instance.getSuperValue()); // true


Do you need any additional instructions about finding relationships ？？ If you don't understand, you can see this article  

《 Crooked understanding ？ Functions and objects in the prototype chain 》

Here, let's use code to show their pointing relationship ：

In the example above, there are  1  Objects  instance ,  Two functions ,SuperType  and  SubType . Function is God , The object is the basic substance . Inheritance comes from two sides ：1.  Inherited from ancestors （ heritage ）;2.  Inherited from God （ talent ）;

//  Inherited from ancestors （ heritage ）

instance.__proto__ === SubType.prototype // true

SubType.prototype.__proto__ === SuperType.prototype // true

//  Inherited from God （ talent ）

SuperType.__proto__ === Function.prototype // true

SubType.__proto__ === Function.prototype // true

SuperType.prototype.__proto__ === Object.prototype // true

Object.prototype.__proto__ === null // true


Of course , We are not talking about the prototype chain . The key is ： Point out the inherited by the prototype chain “ problem ”！！

Its main problem is ：

When the prototype contains reference values , The reference values contained in the prototype are shared across all instances .

function SuperType() {
 this.colors = ["red", "blue", "green"];
}

function SubType() {}

SubType.prototype = new SuperType() //  Prototype chain inheritance

let s1 = new SubType()
let s2 = new SubType()
s1.colors.push("yellow")

console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green', 'yellow']


colors  Is an array , Reference value , When it is shared with  SubType  When , The reference value is used , When we instantiate , If one of the strengths modifies it , Will affect references to other instances .

Actually , We also know that , Rarely do you write inheritance like this in business code ：

SubType.prototype = new SuperType()

 , Prototype chain inheritance can cause confusion in reuse , So it will not be used alone .

Constructor inheritance

Constructor inheritance , It's also called ：“ Stealing constructors ”,“ Object camouflage ” or “ Classic inheritance ”.

The basic idea ： In the subclass constructor, use  apply() and  call() Method to call the parent constructor .

The example in the previous section is changed to ：

function SuperType() {
 this.colors = ["red", "blue", "green"];
}

function SubType() {
 SuperType.call(this) //  Constructor inheritance
}

let s1 = new SubType()
let s2 = new SubType()
s1.colors.push("yellow")

console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']


Perfectly solve the problem of prototype chain inheritance , But it also has its problems , It's also a matter of using the constructor pattern to customize the type ,

namely ： Methods must be defined in the constructor （ Define methods on prototypes , Subclasses are inaccessible ）,

Functions cannot be reused

.

function SuperType() {
}

function SubType() {
 SuperType.call(this) //  Constructor inheritance
}

SuperType.prototype.fn = ()=>{}

let s1 = new SubType()

console.log(s1.fn) // undefined

function SuperType() {
 this.fn=()=>{}
}

function SubType() {
 SuperType.call(this) //  Constructor inheritance
}

let s1 = new SubType()
let s2 = new SubType()

console.log(s1.fn === s2.fn) // false


And this one , In prototype chain inheritance , It's OK again ...

function SuperType() {}
function SubType() {}

SuperType.prototype.fn = ()=>{}
SubType.prototype = new SuperType() //  Prototype chain inheritance

let s1 = new SubType()
console.log(s1.fn) // ()=>{}

function SuperType() {
 this.fn=()=>{}
}
function SubType() {}

SubType.prototype = new SuperType() //  Prototype chain inheritance

let s1 = new SubType()
let s2 = new SubType()

console.log(s1.fn === s2.fn) // true


therefore , Sum up , Prototype chain inheritance and constructor inheritance  “ Trouble ”  Namely ：

• Prototype chain inheritance ： All inherited properties and methods are shared between object instances , Can't do instance private .

• Constructor inheritance ： Subclasses cannot access methods on parent prototypes .

I mean , Why is this thing so twisted ...

So one avoids both “ Trouble ” The way of inheritance has emerged ： Combination inheritance ~~

Combination inheritance

At present, the most popular inheritance mode is composite inheritance ！

The train of thought is ：

Use the prototype chain to inherit the properties and methods on the prototype , And inheriting instance properties through constructors .

function SuperType(name){
 this.name = name;
 this.colors = ["red", "blue", "green"];
}

function SubType(name, age){
 SuperType.call(this, name) //  Constructor inheritance
 this.age = age;
}

SuperType.prototype.sayName = function() {
 console.log(this.name);
}
SubType.prototype = new SuperType() //  Prototype chain inheritance

SubType.prototype.sayAge = function() {
 console.log(this.age);
}

let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27)

s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']

s1.sayName() // Nicholas
s2.sayName() // Greg

s1.sayAge() // 29
s2.sayAge() // 27


Combination inheritance , In summary ,

attribute （ In particular, reference values ） Inherit through constructor , And public 、 Methods that need to be reused are inherited by the prototype chain ！！

Tell the truth ,JS  Inheritance is really strange ... It's not an object-oriented language , But also through the prototype chain to simulate object-oriented , There are really many small pits that need to be noticed .( Ha ha ha , Think about it as a function , Clear )

I'm Anthony nuggets   100  Popular front-end technology bloggers with a reading volume of 10000   INFP  Writing personality persistence  1000  Japanese Geng Wen    Pay attention to me , Spend the long programming years with you