A brief exploration of JavaScript inheritance patterns_javascript skills

In the true sense, Javascript is not an object-oriented language and does not provide a traditional inheritance method. However, it provides a prototype inheritance method, using the prototype properties provided by itself to achieve inheritance. Javascript prototypal inheritance is a topic that is said to be rotten, but I have never fully understood this issue. Today I took some time to read again the several methods of prototypal inheritance in "Javascript Patterns". Let's talk about it below. A relatively simple inheritance method in JS. If you have different opinions, please give us your suggestions.

The most basic prototype chain inheritance will not be repeated here. I will mainly talk about other inheritance modes.

1. Borrow constructor inheritance

function Father (name) {
this.name=name;
}
function Son (name) {
Father.call(this,name); //在子类型中调用超类型的构造函数
this.age=15;
}
var me=new Son("Su"); 

Benefits: You can pass parameters for subtypes, such as the name attribute in the picture.

Disadvantages: 1. The method is defined in the constructor and cannot be reused. 2. Methods defined in the supertype prototype are not visible to subtypes.

2. Combined inheritance (comprehensive prototype chain and constructor)

//超类型构造函数function Father (name) {
this.name=name;
this.famMember=[];
}//超类型构造函数原型方法
Father.prototype.sayName=function () {
alert(this.name);
}//子类型构造函数
function Son (name,age) {
Father.call(this,name); //构造函数方法
this.age=age;
}
Son.prototype=new Father(); //重写子类型原型对象
Son.prototype.constructor=Son; //重写构造函数属性指向子类型
Son.prototype.sayAge=function () {
alert(this.age);
} //重写原型对象后再加入方法
var me=new Son("Su",15);
me.famMember.push("dad","mom"); //子类型可以调用超类型构造函数内的方法var he=new Son("Li",14);alert(he.famMember); // [] 

Benefits: Different subclasses can have their own properties or use the same methods.

Disadvantages: This method requires calling the supertype constructor twice, and the attribute method with the same name will be overridden once.

3. Prototypal inheritance (similar to Object.create())

function object (o) {
function F () {}
F.prototype=o;
return new F();
}var obj={}; //将obj对象传入作为新对象的原型。var me=object(obj); 

Using this method of inheritance requires an object as a prototype object, so the attribute methods of all subtypes that inherit it are common.

ES5 standardizes prototypal inheritance through the new Object.creatr() method.

4. Parasitic inheritance (prototypal inheritance where private methods can be set)

function object (o) {
function F () {}
F.prototype=o;
return new F();
}
var obj={}; //将obj对象传入作为新对象的原型。到这里都与原型式继承相同function creObj(o) {　　var clone=object(obj);　　clone.sayHi=function () {　　　　alert("Hi");　　};return clone; }
var me=creObj(obj); 

Benefits: This method makes up for the shortcomings of prototypal inheritance with only public property methods, allowing subtypes to have private property methods.

5. Parasitic combined inheritance

function inherit (father,son) {
var pro=Object(father.prototype); //创建超类型原型对象的副本
pro.constructor=son;
son.prototype=pro;　　　　　　　　　　　//将副本作为子类型的原型对象
} 

This method is used to make up for the problem of attribute method coverage in combined inheritance.

Use the code above to replace the code Son.prototype=new Father(); in combined inheritance. In this way, the constructor of the parent type only needs to be called once, avoiding the creation of redundant and unnecessary attribute methods, and keeping the prototype chain unchanged. It is an ideal reference type inheritance method.

I will give you a rough introduction to the js inheritance mode. I believe it will be helpful to you. For more information, please continue to pay attention to the Script House website.