Encapsulation et héritage orientés objet 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 en js. En voici quelques-unes couramment utilisées.

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

Code :

       function Stu(name, score) {
            return {
                name: name,
                score: score
            }
        }
        var stu1 = Stu("张三", 80);
        var stu2 = Stu("李四", 90);
        console.log(stu1.name); // 张三

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

　js nous fournit un modèle qui utilise des constructeurs pour générer des objets, ¨Le soi-disant " constructor" " 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 :

      function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(stu1.name + "/" + stu2.score); // 张三  90
        console.log((stu1.constructor == Stu) + "/" + (stu2.constructor == Stu)); // true  true
        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#. pour définir les membres des objets et les instancier via le nouveau mot-clé.

Utilisez le code C# pour générer le même objet Stu

Class Stu
{
　　public string name;
　　public double score;                    
}

OK, maintenant l'objet de base est là. 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. Tous les attributs et méthodes de cet objet seront hérités par l'instance du constructeur. Ensuite, ajouter des membres directement au prototype équivaut à déclarer des membres statiques en C#.

Code :

      function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        Stu.prototype.type='学生';
        Stu.prototype.log = function (s) {
            console.log(s);
        }
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(stu1.type + "/" + stu2.type); // 学生 学生
        stu1.log('hello');  // hello
        console.log(stu1.log == stu2.log);  // true

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

2. Hériter

2.1 Liaison du constructeur

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

   function Stu(name, score) {
            Grade.apply(this, arguments);
            //Grade.call(this, arguments);
            this.name = name,
            this.score = score
        }
        function Grade() {
            this.code = "初中";
            this.ask = function () {
                console.log("大家好");
            }
        }
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(stu1.code); // 初中
        stu1.ask(); // 大家好

L'application ici fait 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ériter via un prototype
Regardons d'abord le code

Code :

   function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        function Grade() {
            this.code = "初中";
        }
        Stu.prototype = new Grade();
        Stu.prototype.constructor = Stu; //防止继承链的紊乱,手动重置声明
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(Stu.prototype.constructor); // 自己的构造函数
        console.log(stu1.code); // 初中

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

L'héritage via un prototype présente un inconvénient : tous les membres hérités sont statiques, alors comment hériter des membres d'un objet ?

2.3 Copier l'héritage

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

Code :

    function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        function Grade() {}
        Grade.prototype.code = "初中";
    }
        //函数封装
        function extend(C, P) {
            var p = P.prototype;
            var c = C.prototype;
            for (var i in p) {
                c[i] = p[i];
            }
        }
        extend(Stu, Grade);
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        stu1.code='高中';
        console.log(stu1.code); // 高中
        console.log(stu2.code); // 初中
        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 permettre à nos amis d'avoir 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.

Pour plus d'articles sur l'encapsulation et l'héritage orientés objet JavaScript, veuillez faire attention au site Web PHP chinois !