Quelles sont les méthodes d'héritage en js

L'ES6 officiellement publié a encapsulé et implémenté HéritageFormulaire, Classe Extends, enregistre ici principalement l'héritage et l'emprunt du prototype de jsConstructeurHérité

Un, Héritage de la chaîne de prototypes

function Super(){
    this.name="小明";
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){}
Sub.prototype = new Super();var instance = new Sub();
instance.sayName();//小明1234567891011

Problème d'héritage de chaîne de prototypes

//Lorsque la super classe contient des valeurs d'attribut de type référence, multiples d'une des sous-classes Dans une instance, à condition que l'une des les attributs de référence d'instance ne sont modifiés qu'une seule fois, les valeurs d'attribut de type référence des autres instances changeront également immédiatement //La raison est que les attributs de la super classe deviennent les attributs prototypes de la fonction de sous-classe Super(){this. name ="Xiao Ming"; this.friends = ['Xiaohong','Xiaoqiang'];
}

Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){}
Sub.prototype = new Super();var instance1 = new Sub();var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强", "张三"]1234567891011121314151617

2. >

Problèmes avec les constructeurs d'emprunt

function Super(){this.name="小明";    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){
    Super.call(this);
}var instance1 = new Sub();var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强"]12345678910111213141516

L'utilisation du constructeur emprunté seul ne peut pas hériter du prototype dans la super classe

Propriétés et méthodes

3. Héritage combiné (héritage prototypique + héritage de constructeur emprunté)L'héritage combiné est également la méthode d'héritage la plus couramment utilisée dans le développement réel

Problèmes d'héritage combiné

function Super(){this.name="小明";    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){
    Super.call(this);
}
Sub.prototype = new Super();var instance1 = new Sub();var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强"]instance1.sayName();//小明instance2.sayName();//小明12345678910111213141516171819

//组合式继承中，超类的构造函数将被调用两次function Super(){this.name="小明";    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){
    Super.call(this);//第二次调用}
Sub.prototype = new Super();//第一次调用var instance = new Sub();1234567891011121314

4. Héritage parasite//Considérez principalement l'objet plutôt que de le définir vous-même Dans le cas de types et constructeurs, l'héritage parasite est un modèle utile, mais il ne peut pas réutiliser les fonctions fonction

Héritage combiné parasite

createAnother(original){
    var clone = Object(original);//创建一个新对象，original的副本
    clone.sayName = function(){ //对象的增强，添加额外的方法
        alert('hi');
    }    
return
 clone;
}var person = {
    name:'小明',
    friends:['小红','小强']
}var person1 = createAnother(person);var person2 = createAnother(person);
person1.friends.push('张三');
console.log(person.friends);//["小红", "小强", "张三"]console.log(person1.friends);//["小红", "小强", "张三"]console.log(person2.friends);//["小红", "小强", "张三"]123456789101112131415161718

ci-dessus, j'ai compilé plusieurs méthodes d'héritage en js pour vous. J'espère que cela vous sera utile à l'avenir.

//寄生组合式继承解决了组合式继承调用两次超类构造函数的问题function inheritPrototype(sub,superr){var prototype = Object.create(superr.prototype);//ES5中
创建对象
副本的方法
    prototype.constructor = superr; //弥补重写原型失去的默认constructor属性
    sub.prototype = prototype;
}function Super(name){
    this.name = name;    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name);
}function Sub(name){
    Super.call(this,name);
}
inheritPrototype(Sub,Super);var person1 = new Sub('小明');var person2 = new Sub('小华');
person1.friends.push('张三');
console.log(person1.friends);//["小红", "小强", "张三"]console.log(person2.friends);//["小红", "小强"]console.log(person1.sayName());//小明console.log(person2.sayName());//小华

Articles associés :

Étapes spécifiques pour transmettre deux paramètres à la méthode JS dans JS onclick

JS basic syntaxe Réponse détaillée

Explication de la méthode de définition des classes en JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!