Several implementation methods of inheritance in JavaScript

This article will introduce you to several implementation methods of inheritance in JavaScript. I hope that after reading this article, you will have a certain understanding of inheritance in JavaScript!

Several implementation methods of inheritance in JavaScript

Inheritance

Want To implement inheritance, you must first have a parent class (constructor) to provide properties and methods.

function Father(name){
    this.name=name   //父类构造函数中的属性
}
Father.prototype.age='40'   //父类原型中的属性

1. Borrowing constructor inheritance

var Son=function(){
    Father.call(this,...arguments)
    this.age=10
}
var son=new Son('小明')
console.log(son)   //{name: "小明", age: 10}

At this time, the Son function just calls the parent constructor in the child constructor through the call method

That is to say, only the attributes of the parent class constructor are inherited, and the attributes of the parent class prototype are not inherited.

You can judge by instanceof method at this time

console.log(son instanceof Father) //false

2. Inherit through prototype chain

var Son=function(name){
    this.sonName=name
}
Son.prototype=new Father()
var xiaoming=new Son('小明')
console.log(xiaoming)    //{sonName:'小明'}
console.log(xiaoming.__proto__==Son.prototype)   //true
console.log(xiaoming.__proto__.__proto__==Father.prototype) //true
console.log(xiaoming.age)  //40  通过原型链查找

Son inherits the name attribute in the Father constructor As well as the age attribute in the prototype,

Son’s prototype object Xiao Ming inherits the sonName attribute in the Son constructor, the name attribute in the Father constructor, and the age attribute in the prototype, but can only pass values. To Son, the value cannot be passed to Father.

3. Combined inheritance (combined prototype chain inheritance and borrowed constructor inheritance)

var Son=function(){
    Father.call(this,...arguments)
}
Son.prototype=new Father()
var son=new Son('小明')
console.log(son)  //{name:'小明'}
console.log(son.age) //40

Combined with the two inheritance methods 1 and 2, it solves the problem of being unable to inherit prototype properties. Methods and the problem of not being able to pass parameters. In fact, the subclass will have two attributes of the parent class, but the attributes of the subclass cover the attributes of the parent class (Father.call(), new Father())

4. Copy inheritance

Through for...in, the enumerable properties and methods on the parent class object and prototype object are cyclically assigned to Son's prototype

function Son(name){
  var father=new Father()
  for(let i in father){
    console.log(father[i])
    Son.prototype[i]=father[i]
  }
  Son.prototype.name=name
}
var son=new Son('leo')
console.log(son)

This method cannot obtain the parent class Non-enumerable methods, and because they need to copy the attributes and methods of the parent class, the memory usage is relatively high and the efficiency is low.

5. Prototypal inheritance

Using prototypal inheritance does not require defining a class, passing in the parameter obj, and generating an object that inherits the obj object. Similar to copying an object and wrapping it with a function. But it is not class inheritance, but a prototype basis, lacking the concept of class.

function ObjectCreate(obj){ //这个方法的原理就是Object.create()
  function F(){}
  F.prototype=obj
  return new F()
}
var Son=new Father('son');
var son=ObjectCreate(Son)
var objson=Object.create(Son);
console.log(son.name)   //son
console.log(objson.name)  //son
console.log(son.__proto__==Son)  //true

6. Parasitic inheritance

Create a function that is only used to encapsulate the inheritance process, then enhance the object in some way internally, and finally return the object

function ObjectCreate(obj){
  function F(){}
  F.prototype=obj
  return new F()
}
var Son=new Father();
function subObject(obj){
  var sub=ObjectCreate(obj)
  sub.name='son'
  return sub
}
var son=subObject(Son)
console.log(son.name)  //son

7. Parasitic combined inheritance

Combining parasitic inheritance and combined inheritance, the inheritance method without two superclass attributes is perfectly realized, but it is too complicated. It feels worse than combined inheritance.

function ObjectCreate(obj){
  function F(){}
  F.prototype=obj
  return new F()  
}
var middle=ObjectCreate(Father.prototype) //middle的原型继承了父类函数的原型
function Son(){
  Father.call(this,...arguments)
}
Son.prototype=middle; 
middle.construtor=Son;   //修复实例 
var son=new Son('son');
console.log(son)   //{name:'son'}

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of Several implementation methods of inheritance in JavaScript. For more information, please follow other related articles on the PHP Chinese website!