Home > Article > Web Front-end > 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!