Une brève exploration des compétences JavaScript en matière de modèles d'héritage_javascript

Dans le vrai sens du terme, Javascript n'est pas un langage orienté objet et ne fournit pas de méthode d'héritage traditionnelle. Cependant, il fournit une méthode d'héritage prototype qui utilise les propriétés prototypes fournies par lui-même pour réaliser l'héritage. L'héritage prototypique Javascript est un sujet que l'on dit pourri, mais je n'ai jamais complètement compris ce problème. Aujourd'hui, j'ai pris le temps de relire les différentes méthodes d'héritage prototypique dans "Modèles Javascript". méthode d'héritage simple en JS Si vous avez des opinions différentes, veuillez nous faire part de vos suggestions.

L'héritage de chaîne de prototypes le plus basique ne sera pas répété ici, je parlerai principalement des autres modes d'héritage.

1. Emprunter l'héritage du constructeur

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

Avantages : vous pouvez transmettre des paramètres pour les sous-types, tels que l'attribut name dans la figure.

Inconvénients : 1. La méthode est définie dans le constructeur et ne peut pas être réutilisée. 2. Les méthodes définies dans le prototype du supertype ne sont pas visibles pour les sous-types.

2. Héritage combiné (chaîne de prototypes complète et constructeur)

//超类型构造函数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); // [] 

Avantages : Différentes sous-classes peuvent avoir leurs propres propriétés ou utiliser les mêmes méthodes.

Inconvénients : cette méthode nécessite d'appeler le constructeur de supertype deux fois et la méthode d'attribut portant le même nom sera remplacée une fois.

3. Héritage prototypique (similaire à Object.create())

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

L'utilisation de cette méthode d'héritage nécessite un objet comme objet prototype, donc les méthodes d'attribut de tous les sous-types qui en héritent sont communes.

ES5 standardise l'héritage prototypique via la nouvelle méthode Object.creatr().

4. Héritage parasite (héritage prototypique où des méthodes privées peuvent être définies)

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); 

Avantages : Cette méthode compense les lacunes de l'héritage prototypique avec uniquement des méthodes de propriété publique, permettant aux sous-types d'avoir des méthodes de propriété privée.

5. Héritage combiné parasite

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

Cette méthode est utilisée pour compenser le problème de couverture des méthodes d'attributs dans l'héritage combiné.

Utilisez le code ci-dessus pour remplacer le code Son.prototype=new Father(); De cette façon, le constructeur du type parent ne doit être appelé qu'une seule fois, évitant ainsi la création de méthodes d'attributs redondantes et inutiles et gardant la chaîne de prototypes inchangée. Il s'agit d'une méthode d'héritage de type référence idéale.

Je vais vous donner une introduction approximative au mode d'héritage js. Je pense que cela vous sera utile. Pour plus d'informations, veuillez continuer à prêter attention au site Web de Script House.