Résumé des méthodes d'héritage en JS (avec cas)

Héritage de chaîne de prototypes

Noyau : Utiliser l'instance de la classe parent comme prototype de la sous-classe
Caractéristiques :
1 : Relation d'héritage très pure, l'instance est la sous-classe Une instance de est également une instance de la classe parent
2 : La classe parent ajoute une nouvelle méthode prototype, accessible par les sous-classes
Inconvénients :
1 : Si vous souhaitez ajouter attributs et méthodes à la sous-classe, vous devez Après new Animal(), l'héritage multiple ne peut pas être obtenu
2 : Lors de la création d'une instance de sous-classe, les paramètres ne peuvent pas être transmis au constructeur de la classe parent

function Animal(name){
    this.name=name;
    this.sleep=function(){
        console.log(this.name+"正在睡觉");
    }
}
Animal.prototype.eat=function() {
    console.log(this.name + "正在吃");
}
function Cat(){
}
Cat.prototype=new Animal();
Cat.prototype.name="猫";
var cat=new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat.eat());
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animal);//true

Héritage de construction
Core : Utiliser le constructeur de la classe parent pour améliorer l'instance de sous-classe, ce qui équivaut à copier les attributs d'instance de la classe parent dans la sous-classe (aucun prototype n'est utilisé)
Caractéristiques :
1 : Lors de la création d'une instance de sous-classe, vous pouvez demander à la classe parent Passer des paramètres
2 : Un héritage multiple peut être obtenu
Inconvénients :
1 : L'instance n'est pas une instance de la classe parent , mais une instance de la sous-classe
2 : Seules les propriétés et les méthodes de la classe parent peuvent être héritées, pas l'héritage Attributs et méthodes du prototype
3 : La réutilisation des fonctions ne peut pas être réalisée. Chaque sous-classe a une copie du. Fonction d'instance de classe parent, qui affecte les performances

    function Animal(name){
            this.name=name;
            this.sleep=function(){
                console.log(this.name+"正在睡觉");
            }
        }
        Animal.prototype.eat=function() {
            console.log(this.name + "正在吃");
        }
                function Cat(name){
                Animal.call(this);
                this.name=name;
        }
        var cat=new Cat("猫");
        console.log(cat.name);
        console.log(cat.sleep());
//        console.log(cat.eat());不能继承原型化方法
        console.log(cat instanceof Cat);//true
        console.log(cat instanceof Animal);//false

Héritage d'instance

function Animal(name){
    this.name=name;
    this.sleep=function(){
        console.log(this.name+"正在睡觉");
    }
}
Animal.prototype.eat=function() {
    console.log(this.name + "正在吃");
}
function Cat(name){
    var instance=new Animal();
    instance.name=name;
    return instance;
}
var cat=new Cat("猫");
console.log(cat.name);
console.log(cat.sleep());
console.log(cat.eat());
console.log(cat instanceof Cat);//false
console.log(cat instanceof Animal);//true

Caractéristiques :
Il n'y a aucune restriction sur la méthode d'appel , qu'il s'agisse d'une nouvelle sous-classe () ou d'une sous-classe (), l'objet renvoyé a le même effet
Inconvénients :
L'instance est l'instance de la classe parent, pas une instance d'une sous-classe
Ne prend pas en charge l'héritage multiple
Héritage combiné

function Animal(name){
    this.name=name;
    this.sleep=function(){
        console.log(this.name+"正在睡觉");
    }
}
Animal.prototype.eat=function() {
    console.log(this.name + "正在吃");
}
function Cat(name){
    Animal.call(this);
    this.name=name;
    }
Cat.prototype=new Animal();
var cat=new Cat("猫");
console.log(cat.name);
console.log(cat.sleep());
console.log(cat.eat());
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animal);//true

Autres :
1 : Vérification du formulaire
Soumission post-sécurisée, n'exposera pas les informations
get exposera les informations
2 : Objet navigateur
3 : le navigateur contient des informations sur le navigateur navigator.appName renvoie le nom du navigateur
4 : Les attributs de la classe encapsulée peuvent être personnalisés, le nom est personnalisé

Je te crois J'ai maîtrisé la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment lier les touches de direction pour contrôler le mouvement des div

Comment créer l'effet de changement de police en cliquant sur le texte du titre

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!