compétences en encapsulation orientée objet javascript et héritage_javascript

Trions l'encapsulation et l'héritage en js orienté objet.

1.Encapsulation
Il existe de nombreuses façons d’implémenter l’encapsulation dans js. En voici quelques-unes couramment utilisées.

1.1 Objet de génération du mode original
Écrivez directement nos membres dans l'objet et renvoyez-les avec la fonction. Inconvénients : Il est difficile de voir une instance d’un modèle.

Code :

Copier le code Le code est le suivant :

function Stu(nom, score) {
             revenir {
nom : nom,
score : score
            }
>
        var stu1 = Stu("张三", 80);
        var stu2 = Stu("李思", 90);
console.log(stu1.name); // Zhang San

1.2 Générer des objets de modèle de construction

js nous fournit un modèle d'utilisation de constructeurs pour générer des objets. Le soi-disant "constructeur" est en fait une fonction ordinaire, mais la variable this est utilisée en interne. Lorsque le mot-clé new est utilisé pour générer une instance du constructeur, la variable this sera liée à l'objet instance.

Entrez directement le code :

Copier le code Le code est le suivant :

Fonction Stu(nom, score) {
This.name = nom,
This.score = score
>
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李思", 90);
console.log(stu1.name "/" stu2.score); // Zhang San 90
console.log((stu1.constructor == Stu) "/" (stu2.constructor == Stu)); // vrai vrai
console.log((stu1 instanceof Stu) "/" (stu2 instanceof Stu)); // true true

Il n'est pas difficile de voir que l'objet généré par le constructeur js est exactement le même que l'objet généré par la classe en C#. Les deux utilisent des modèles pour définir les membres de l'objet et les instancier via le nouveau mot-clé.

Générer le même objet Stu en utilisant le code C#

Copier le code Le code est le suivant :

Classe Stu
{
​nom de chaîne publique ;
　　double score public ;     
>

OK, nous avons maintenant les objets de base. Nous avons donc maintenant besoin d’une méthode commune à tous les objets et qui ne permette de créer cette méthode qu’une seule fois. (Pas créé à plusieurs reprises avec l'objet new) Que dois-je faire ? Tout le monde sait qu'en C# nous pouvons utiliser des membres statiques. Alors comment faire en js ?

1.3 Mode Prototype

En js, chaque constructeur possède un attribut prototype. Toutes les propriétés et méthodes de cet objet seront héritées par l'instance du constructeur. Ensuite, ajouter des membres directement au prototype équivaut à déclarer des membres statiques en C#.

Code :

Copier le code Le code est le suivant :

Fonction Stu(nom, score) {
This.name = nom,
This.score = score
>
Stu.prototype.type='Étudiant';
Stu.prototype.log = fonction(s) {
console.log(s);
>
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李思", 90);
console.log(stu1.type "/" stu2.type); // Étudiant Étudiant
          stu1.log('bonjour'); // bonjour
console.log(stu1.log == stu2.log); // vrai

C'est tout pour l'encapsulation. Voyons comment l'héritage est implémenté dans js ?

2. Héritage

2.1 Liaison du constructeur

Appelez directement la méthode call ou apply dans la fonction enfant pour lier le constructeur de l'objet parent à l'objet enfant.

Copier le code Le code est le suivant :

function Stu(nom, score) {
Grade.apply(this, arguments);
//Grade.call(ceci, arguments);
This.name = nom,
This.score = score
>
         fonction Note() {
This.code = « Lycée » ;
This.ask = function () {
console.log("Bonjour à tous");
            }
>
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李思", 90);
console.log(stu1.code); // Lycée
          stu1.ask(); // Bonjour à tous

L'application fait ici deux choses. Elle donne le premier paramètre this au constructeur Grade (appelant), puis exécute le code dans Grade. Cela équivaut à exécuter à nouveau les membres définis avec ceci dans Grade dans Stu.

2.2 Héritage via prototype
​Regardez d'abord le code

Code :

Copier le code Le code est le suivant :

Fonction Stu(nom, score) {
This.name = nom,
This.score = score
>
         fonction Note() {
This.code = « Lycée » ;
>
Stu.prototype = new Grade();
Stu.prototype.constructor = Stu; //Prévenir le désordre de la chaîne d'héritage et réinitialiser manuellement l'instruction
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李思", 90);
console.log(Stu.prototype.constructor); // Propre constructeur
console.log(stu1.code); // Lycée

Comme mentionné précédemment, le prototype est équivalent à un membre statique en C#, nous transformons donc tous les membres de la classe parent en nos propres membres statiques pour obtenir l'héritage.

Il y a un inconvénient à l'héritage via prototype : tous les membres hérités sont statiques, alors comment hériter des membres objet ?

2.3 Héritage de copie

Copiez toutes les propriétés et méthodes de l'objet parent dans l'objet enfant pour obtenir l'héritage.

Code :

Copier le code Le code est le suivant :

Fonction Stu(nom, score) {
This.name = nom,
This.score = score
>
fonction Note() {}
Grade.prototype.code = "Lycée";
>
//Encapsulation de fonction
fonction étendre (C, P) {
            var p = P.prototype;
          var c = C.prototype;
pour (var je dans p) {
                    c[i] = p[i];
            }
>
étendre(Stu, Grade);
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李思", 90);
          stu1.code='Lycée';
console.log(stu1.code); // Lycée
console.log(stu2.code); // Lycée
console.log(Stu.prototype.constructor);
console.log(Grade.prototype.constructor)

C'est tout pour l'organisation orientée objet js. Cette chose n'est pas statique. Vous pouvez apporter des modifications en fonction de vos propres besoins lorsque vous l'utilisez. Il y a un dicton qui est très bon, le bon est le meilleur.

Ici, nous analysons uniquement l'encapsulation et l'héritage. Nous ferons d'autres articles dans le futur pour vous donner une compréhension plus approfondie de la programmation orientée objet JavaScript. Bien sûr, ce sont toutes des compréhensions personnelles. S'il y a des omissions, veuillez me contacter.