Un exemple d'explication de la mise en œuvre des fonctionnalités d'encapsulation d'objets dans la programmation JavaScript

1. Objet de prototype

1.1 Consients des constructeurs

JavaScript génère de nouveaux objets via des constructeurs, de sorte que les constructeurs peuvent être considérés comme des modèles pour les objets. Les propriétés et les méthodes de l'objet d'instance peuvent être définies à l'intérieur du constructeur.

 fonction cat (name, couleur) {this.name = name; this.color = couleur;} var cat1 = new Cat ('Big Hair', 'White'); cat1.name // 'Big Hair'cat1.Color //' White '

La fonction CAT dans le code ci-dessus est un constructeur. L'attribut de nom et l'attribut de couleur sont définis en interne. Tous les objets d'instance généreront ces deux attributs. Cependant, cela est un gaspillage de ressources système, car les propriétés ne peuvent pas être partagées entre les instances d'objet du même constructeur.

 fonction cat (name, couleur) {this.name = name; this.color = couleur; this.meow = function () {console.log ('mew, mew, mew ...'); };} var cat1 = new Cat ('Big Hair', 'White'); var Cat2 = new Cat ('Ei Mao', 'Black'); Cat1.meow === Cat2.Meow // False

Dans le code ci-dessus, Cat1 et Cat2 sont des instances du même constructeur. Cependant, leurs méthodes de miow sont différentes, c'est-à-dire que chaque fois qu'une nouvelle instance est créée, une nouvelle méthode Meow sera créée. Ce n'est ni nécessaire ni gaspille les ressources système, car toutes les méthodes de miow sont le même comportement et doivent être partagées complètement.

1.2 Le rôle de l'attribut prototype

Dans le langage JavaScript, chaque objet a un objet prototype correspondant, appelé objet prototype. Toutes les propriétés et méthodes définies sur l'objet prototype peuvent être héritées par l'objet dérivé. Il s'agit de la conception de base du mécanisme de succession JavaScript.

En plus de cette approche, JavaScript fournit également une autre façon de définir des objets d'instance. Nous savons qu'un constructeur est une fonction, un objet, et a également ses propres propriétés et méthodes. Un attribut prototype pointe vers un autre objet, qui est généralement appelé objet prototype. Cet objet est très spécial. Tant que les propriétés et les méthodes définies peuvent être partagées par tous les objets d'instance. C'est-à-dire que lorsque le constructeur génère un objet d'instance, un attribut prototype est automatiquement attribué à l'objet d'instance.

 fonction animal (name) {this.name = name;} animal.prototype.color = "white"; var cat1 = nouvel animal ('big hair'); var cat2 = nouvel animal ('erimao'); cat1.color // 'white'cat2.color //' blanc '

Le code ci-dessus ajoute un attribut de couleur à l'objet prototype de l'animal constructeur. En conséquence, les deux objets d'instance Cat1 et Cat2 transportent cette propriété.

Plus particulièrement, tant que l'objet prototype est modifié, les modifications seront immédiatement reflétées dans l'objet d'instance.

 Animal.prototype.color = "jaune"; cat1.color // 'jaune'cat2.color //' jaune '

Le code ci-dessus modifie la valeur de l'attribut de couleur de l'objet prototype en jaune, et la valeur de l'attribut de couleur des deux objets d'instance changera immédiatement. En effet, l'objet d'instance n'a en fait aucun attribut de couleur, et ils lisent tous l'attribut de couleur de l'objet Prototype. C'est-à-dire que lorsque l'objet d'instance lui-même n'a pas une certaine propriété ou méthode, il ira à l'objet Prototype du constructeur pour trouver la propriété ou la méthode. C'est la chose particulière à propos des objets prototypes.

Si l'objet d'instance lui-même a une certaine propriété ou méthode, il ne recherchera plus cette propriété ou cette méthode dans l'objet Prototype.

 Cat1.color = 'Black'; Cat2.Color // 'Yellow'animal.prototype.color // "Yellow";

Le code ci-dessus modifie la propriété couleur de l'objet d'instance Cat1 en noir, afin qu'il ne soit plus nécessaire de lire la propriété couleur de l'objet Prototype, et la valeur de ce dernier est encore jaune.

En bref, la fonction de l'objet prototype est de définir les propriétés et les méthodes partagées par tous les objets d'instance, il est donc également appelé prototype de l'objet d'instance, et l'objet d'instance peut être considéré comme dérivé de l'objet prototype.

 Animal.prototype.walk = function () {console.log (this.name + 'is walking.');};

Le code ci-dessus définit une méthode de marche sur l'objet Animal.Protype, qui sera appelé sur tous les objets d'instance d'animal.

1.3 Chaîne prototype

Étant donné que tous les objets de JavaScript ont des constructeurs et que tous les constructeurs ont des attributs de prototype (en fait toutes les fonctions ont des attributs de prototype), tous les objets ont leurs propres objets prototypes prototypes.

Par conséquent, les propriétés et les méthodes d'un objet peuvent être définies sur elle-même ou sur son objet prototype (comme la méthode de marche dans le code ci-dessus). Étant donné que le prototype lui-même est un objet et a son propre prototype, une chaîne de prototype est formée. Par exemple, l'objet A est le prototype de l'objet B, l'objet B est le prototype de l'objet C, etc. Étant donné que le traçage de la racine de la source, les objets de la source sont générés à partir du constructeur d'objets (en utilisant la commande New Object ()), donc si vous le tracez vers le haut par couche, le prototype de tous les objets peut éventuellement être tracé à l'objet.Protype. Alors, y a-t-il un prototype pour objet.prototype? La réponse peut être oui ou non, car le prototype d'objet.prototype est un null sans propriétés et méthodes.

 Object.getprototypeof (object.prototype) // null

Le code ci-dessus indique que le prototype de l'objet objet.Protype est nul. Puisque NULL n'a pas de propriétés, la chaîne prototype se termine ici.

La fonction de "chaîne prototype" est que lors de la lecture d'un certain attribut d'un objet, le moteur JavaScript recherche d'abord les attributs de l'objet lui-même. S'il ne peut être trouvé, il recherchera son prototype. S'il ne peut toujours être trouvé, il recherchera le prototype du prototype. Et ainsi de suite, si l'objet.prototype au niveau supérieur n'est toujours pas trouvé, il renvoie indéfini.

Par exemple, si l'attribut prototype d'une fonction pointe vers un tableau, cela signifie que la fonction peut être utilisée comme constructeur de tableau, car les objets d'instance qu'il génère peut appeler la méthode du tableau via l'attribut Prototype.

 Fonction MyArray () {} MyArray.prototype = new Array (); MyArray.prototype.Constructor = MyArray; var Mine = new MyArray (); Mine.push (1, 2, 3); mine.length // 3Mine Instance Array // Vrai

La mine dans le code ci-dessus est un objet d'instance de MyArray. Étant donné que la propriété prototype de MyArray pointe vers un tableau, la mienne peut appeler des méthodes de tableau (ces méthodes sont en fait définies sur l'objet prototype du tableau). Quant à la dernière ligne d'expression d'instance, nous savons que l'opérateur d'instance est utilisé pour comparer si un objet est une instance d'un constructeur, et la dernière ligne indique que le mien est une instance de tableau.

 L'instance de mine de Array // est équivalente à (array === MyArray.prototype.Constructor) || (array === array.prototype.constructor) || (array === object.prototype.constructor)

Le code ci-dessus illustre l'essence de l'opérateur d'instance, qui est comparée aux attributs du constructeur de tous les objets prototypes de l'objet d'instance (pour l'introduction de cet attribut, veuillez consulter la section suivante). Tant qu'il y en a un, il reviendra vrai, sinon il reviendra faux.

1.4 Attribut de constructeur

L'objet Prototype a un attribut constructeur qui pointe vers la fonction du constructeur où l'objet prototype est situé par défaut.

 fonction p () {} p.prototype.constructor === p // true

Étant donné que l'attribut constructeur est défini sur l'objet Prototype, cela signifie qu'il peut être hérité par tous les objets d'instance.

 Fonction P () {} var p = new P (); P.Constructor // Fonction P () {} P.Constructor === p.prototype.constructor // trueep.hasownproperty ('constructeur') // false

Le code ci-dessus indique que P est un objet d'instance de constructeur P, mais P lui-même n'a pas d'attribut de constructeur, qui lit en fait l'attribut p.prototype.constructor sur la chaîne prototype.

La fonction de l'attribut constructeur est de distinguer quel constructeur l'objet prototype est défini.

 fonction f () {}; var f = new f (); f.constructor === f // truef.constructor === regexp // false

Le code ci-dessus signifie que l'utilisation de la propriété du constructeur, il est déterminé que la fonction du constructeur de la variable f est f, pas regexp.

2.Object.getprototype de méthode

La méthode object.getPrototypeOf renvoie le prototype d'un objet.

 // Le prototype de l'objet vide est objet.prototypeObject.getPrototypeOf ({}) === object.prototype // true // Le prototype de la fonction est la fonction.prototypeFonction f () {} objet.getprototypeof (f) === function.prototype // true // supplore f est un constructeur et F est un objectif de F /, alors, la protof de f est f.prototypevar f = new f (); object.getprototypeof (f) === f.prototype // true

3.Object.Create Méthode

La méthode objet.Create est utilisée pour générer un nouvel objet et peut remplacer la nouvelle commande. Il accepte un objet comme argument et renvoie un nouvel objet, qui hérite complètement des propriétés de la première, c'est-à-dire que la première devient le prototype du second.

 var o1 = {p: 1}; var o2 = object.create (o1); o2.p // 1

Dans le code ci-dessus, la méthode Object.Create génère O2 basée sur O1. À l'heure actuelle, O1 devient le prototype d'O2, c'est-à-dire que O2 hérite de toutes les propriétés de O1.

La méthode objet.Create est essentiellement équivalente au code suivant. Si l'ancien navigateur ne prend pas en charge la méthode Object.Create, vous pouvez utiliser le code suivant pour le déployer vous-même.

 if (typeof object.create! == "fonction") {object.create = function (o) {function f () {} f.prototype = o; retourner nouveau f (); };}

Le code ci-dessus montre que la méthode Object.Create crée essentiellement un nouveau constructeur F, puis permettant l'attribut prototype de F pour pointer à l'objet O comme prototype, et enfin renvoyer une instance de F, afin que l'instance puisse hériter des attributs de O.

Les nouveaux objets générés dans les trois manières suivants sont équivalents.

 var o1 = object.create ({}); var o2 = object.create (object.prototype); var o3 = new object ();

Si vous souhaitez générer un objet qui n'hérite d'aucune propriété (tel que ToString et Valeur Of Methods), vous pouvez définir le paramètre objet.Create sur NULL.

 var o = object.create (null); o.valueof () // typeError: objet [objet objet] n'a pas de méthode «valeurof»

Le code ci-dessus indique que si le prototype de l'objet O est nul, il n'a pas certaines propriétés définies sur l'objet objet.prototype, comme la méthode de valeur OF.

Lorsque vous utilisez la méthode objet.Create, un prototype d'objet doit être fourni, sinon une erreur sera signalée.

 Object.create () // typeError: le prototype d'objet peut être seulement un objet ou un nul

Le nouvel objet généré par la méthode objet.Create hérite dynamiquement le prototype. L'ajout ou la modification de toute méthode sur le prototype réfléchira immédiatement sur le nouvel objet.

 var o1 = {p: 1}; var o2 = object.create (o1); o1.p = 2; o2.p // 2

Le code ci-dessus indique que la modification du prototype d'objet affectera l'objet nouvellement généré.

En plus du prototype d'objet, la méthode Object.Create peut également accepter un deuxième paramètre, représentant l'objet Attributs décrivant les attributs, qui est le même format que la méthode objet.defineproperties utilisées. Les propriétés d'objet qu'il décrit seront ajoutées au nouvel objet.

 var o = object.create (object.prototype, {p1: {value: 123, énumérable: true}, p2: {valeur: "ABC", énumérable: true}}); o.p1 // 123o.p2 // "ABC"

Étant donné que la méthode Object.Create n'utilise pas de constructeur, l'opérateur d'instance ne peut pas être utilisé pour déterminer quelle instance de constructeur est l'objet. À l'heure actuelle, vous pouvez utiliser la méthode ISPrototype OFO suivante pour interpréter quel objet le prototype est.

4.Sprototype de la méthode

La méthode ISPrototypeOF est utilisée pour déterminer si un objet est un prototype d'un autre objet.

 var o1 = {}; var o2 = object.create (o1); var o3 = object.create (o2); o2.isprototypeof (o3) // trueo1.isprototypeof (o3) // true

Le code ci-dessus montre que IsprotypeOf renvoie true tant qu'un objet est sur la chaîne prototype.

5. Un exemple simple

 var classDemo = function () {// variable privée statique var private_static_var = 'aaaa'; // Méthode privée statique var private_static_func = function (key) {return key + private_static_var; } // Méthode privée, la clé est de passer ce var private_func = function (self, key) {return private_static_func (key + self.id); } var _class = function (id) {// constructeur this.id = id; // Variable publique} // Public Method_class.prototype.public_func = function (key) {return private_func (this, key); } return _class;} (); var a = new classDemo ('Hello World'); alert (a.public_func ('world hello'));

Il n'y a pas de moyen simple de mettre en œuvre des variables privées et des variables / méthodes statiques publiques, mais l'encapsulation est suffisante pour être fait dans cette mesure.