Maison > interface Web > js tutoriel > le corps du texte

Comment refléter la relation d'héritage js

(*-*)浩
Libérer: 2020-09-18 16:22:19
original
2565 Les gens l'ont consulté

JS est un langage faiblement typé orienté objet, et l'héritage est également l'une de ses fonctionnalités très puissantes. Alors comment implémenter l’héritage en JS ? Attendons et voyons.

Comment refléter la relation d'héritage js

Les deux méthodes d'héritage suivantes sont couramment utilisées en js :

Héritage de chaîne de prototypes (entre objets Héritage)

Héritage de classe (héritage entre constructeurs)

Puisque js n'est pas un langage véritablement orienté objet comme Java, js est basé sur des objets et n'a aucun concept de classes. Par conséquent, si vous souhaitez implémenter l'héritage, vous pouvez utiliser le mécanisme prototype de js ou les méthodes apply et call pour y parvenir

Dans les langages orientés objet, nous utilisons des classes pour créer un objet personnalisé. Cependant, tout en js est un objet, alors comment créer un objet personnalisé ? Cela nécessite l'utilisation du prototype js :

Nous pouvons simplement considérer le prototype comme un modèle, et les objets personnalisés nouvellement créés sont tous des copies de ce modèle (prototype) (en fait pas une copie mais une copie) Lien, mais ce lien est invisible. Il y a un pointeur __Proto__ invisible à l'intérieur de l'objet nouvellement instancié, pointant vers l'objet prototype).

JS peut simuler les fonctions des classes via des constructeurs et des prototypes. De plus, l'implémentation de l'héritage de classe js repose également sur la chaîne de prototypes.

Héritage prototypique et héritage de classe

L'héritage de classe consiste à appeler le constructeur de supertype à l'intérieur du constructeur de sous-type.

L'héritage de classe strict n'est pas très courant et est généralement utilisé en combinaison :

function Super(){
    this.colors=["red","blue"];
}
 
function Sub(){
    Super.call(this);
}
Copier après la connexion

L'héritage prototypique consiste à créer de nouveaux objets à l'aide d'objets existants, en pointant le prototype de la sous-classe vers le La classe parent équivaut à rejoindre la chaîne de prototypes de la classe parent

Héritage de la chaîne de prototypes

Pour que la sous-classe hérite des attributs (y compris les méthodes) du parent classe, d'abord Un constructeur doit être défini. Ensuite, affectez la nouvelle instance de la classe parent au prototype du constructeur. Le code est le suivant :

<script>
    function Parent(){
        this.name = 'mike';
    }
 
    function Child(){
        this.age = 12;
    }
    Child.prototype = new Parent();//Child继承Parent,通过原型,形成链条
 
    var test = new Child();
    alert(test.age);
    alert(test.name);//得到被继承的属性
    //继续原型链继承
    function Brother(){   //brother构造
        this.weight = 60;
    }
    Brother.prototype = new Child();//继续原型链继承
    var brother = new Brother();
    alert(brother.name);//继承了Parent和Child,弹出mike
    alert(brother.age);//弹出12
</script>
Copier après la connexion

Il reste encore un maillon manquant dans l'héritage de la chaîne de prototypes ci-dessus, qui est Object. Tous les constructeurs héritent d'Object. L'héritage des objets se fait automatiquement et ne nécessite pas d'héritage manuel. Alors, quelle est leur affiliation ?

Détermination de la relation entre les prototypes et les instances

La relation entre les prototypes et les instances peut être déterminée de deux manières. Opérateur instanceof et méthode isPrototypeof() :

alert(brother instanceof Object)//true
alert(test instanceof Brother);//false,test 是brother的超类
alert(brother instanceof Child);//true
alert(brother instanceof Parent);//true
Copier après la connexion

Tant qu'il s'agit d'un prototype qui est apparu dans la chaîne de prototypes, on peut dire qu'il s'agit du prototype de l'instance dérivée de la chaîne de prototypes. La méthode isPrototypeof() retournera également true.

Recommandations d'apprentissage associées : Tutoriel vidéo 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!

Étiquettes associées:
js
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal