We can simply be divided into the following inheritance methods :
- Prototype chain inheritance
- Constructor inheritance
- Combinatorial inheritance
- Parasitic combination inheritance/enhanced parasitic combination inheritance
- Class inheritance
Below A represents the parent and B represents the child
Let's look at the prototype chain inheritance
first, and code first
function A(name,age){
this.name = name;
this.arr = [];
this.age = age;
this.sing = function(){
return '我会唱歌、我会跳舞。'
}
}
function B(run){
this.run = run
}
B.prototype = new A('zjq',18)
console.log(new B()._proto_ === A.construct)
let a = new B('123')
let b = new B('456')
a.arr.push('1')
console.log(b.arr) //['1']
B has been fully integrated into the properties and methods of A, but there is a disadvantage that when we instantiate two Bs, adding item to the first arr, the second instantiated object will also change. A new item is added to the arr of a and b. The method becomes shared, not private to the instance. (Reference type)
Constructor inheritance
code
function A(name,age){
this.name = name;
this.age = age;
this.arr =[];
this.sing = function(){
return '我会唱歌、我会跳舞。'
}
}
function B(run){
this.run = run
A.call(this,'zjq',this.run) //父级的属性和方法称为子级的私有属性和方法 子级可以向父级传参
}
let Bobj = new B('runing')
console.log(Bobj)
console.log(Bobj.sing())
let a = new B('123')
let b = new B('456')
a.arr.push('1')
console.log(b.arr) //[]
Although constructor inheritance can use the methods and properties of A, it is not related to inheritance. There is no information about A on its _proto_. It turns A's properties and methods into its own properties and methods. To create an instance of a subclass, you can pass parameters to the constructor of the parent class. Solved the problem that the method became shared and became private to the instance.
Combination inheritance
on code
function A(name, age) {
this.name = name;
this.age = age;
this.arr=[]
}
A.prototype.sing = function () {
return '我会唱歌、我会跳舞。' + this.name + this.age
}
function B(run) {
this.run = run
A.call(this, 'zjq', this.run) //父级的属性和方法称为子级的私有属性和方法 子级可以向父级传参
}
B.prototype = new A()
let brr = new B('参数')
let a = new B('123')
let b = new B('456')
a.arr.push('1')
console.log(b.arr) //[]
console.log(brr)
console.log(brr.sing())
console.log(brr.age)
Combining the advantages of prototype chain inheritance and borrowing constructor inheritance, inheriting the properties and methods of A can also pass its own parameters to A. Solved the problem that the method became shared and became private to the instance, but the A constructor was called twice.
Parasitic combination inheritance
code
function A(name, age) {
this.name = name;
this.age = age;
this.arr = []
}
A.prototype.sing = function () {
return '我会唱歌、我会跳舞。' + this.name + this.age
}
function B(run) {
this.run = run
A.call(this, 'zjq', this.run)
}
B.prototype = A.prototype
// let b= new B('123')
// console.log(b)
B.prototype.sing = function () {
return 'xxx'
}
let a = new B('123')
let b = new B('456')
a.arr.push('1')
console.log(b.arr) //[]
console.log(new A().sing()) //变成了xxx 而不是 return '我会唱歌、我会跳舞。' + this.name + this.age
It solves the problem that the method becomes shared and becomes private to the instance, but there is another outstanding problem. B can change things on the prototype chain, and A and B share the prototype chain.
Enhanced Parasitic Combination Inheritance
function A(name, age) {
this.name = name;
this.age = age;
}
A.prototype.sing = function () {
return '我会唱歌、我会跳舞。' + this.name + this.age
}
function B(run) {
this.run = run
A.call(this, 'zjq', this.run)
}
function f(){
}
f.prototype = A.prototype
B.prototype = new f()
let b= new B('123')
console.log(b)
B.prototype.sing = function(){
return 'xxx'
}
console.log(new A().sing()) //return '我会唱歌、我会跳舞。' + this.name + this.age
Solve the problem of shared prototype chain. Perfect ending.
Class inheritance
on code
class A {
//父级构造函数
constructor(name) {
this.name = name;
}
sing() {
return this.name + 'xxx'
}
}
class B extends A {
//子级继承父级
constructor(name,age) {
super(name) 调用实现父类的构造函数 并传递参数
this.age = age
}
}
let b = new B(12333,222) //实例化子级
console.log(b)
console.log(b.sing()) //return this.name + 'xxx'
If there is anything wrong with the above content, please comment in time.