JS Explication de base orientée objet (mode d'usine, mode constructeur, mode prototype, mode mixte, mode prototype dynamique)

Qu'est-ce que l'objet? Orienté objet est une sorte de pensée! (absurdité).

Orienté objet peut traiter tous les modules clés dans un programme en tant qu'objets, et les modules ont des attributs et des méthodes. De cette façon, si nous encapsulons certaines propriétés et méthodes, il sera très pratique à utiliser à l'avenir et peut également éviter un travail fastidieux et répétitif. Ensuite, nous expliquerons l'implémentation orientée objet dans JS.

Modèle d'usine

Le modèle d'usine est un modèle de conception bien connu dans le domaine de l'ingénierie logicielle, et comme les classes ne peuvent pas être créées dans ECMAScript, les objets sont créés avec une encapsulation de fonction. La méthode d'implémentation est très simple, c'est-à-dire créer un objet dans la fonction, attribuer des attributs et des méthodes à l'objet, puis renvoyer l'objet.

 fonction createblog (name, url) {var o = new object (); o.name = name; o.url = url; o.sayUrl = function () {alert (this.url); } return o;} var blog1 = createblog ('wuyuchang', '//www.vevb.com/');

On peut voir que la méthode d'implémentation du modèle d'usine est très simple, résolvant le problème de la création de plusieurs objets similaires, mais le modèle d'usine ne peut pas identifier le type de l'objet car il s'agit de l'objet, contrairement à la date, au tableau, etc., donc le modèle de constructeur apparaît.

Mode constructeur

Le constructeur dans ECMAScript peut créer des objets de types spécifiques, similaires aux objets JS natifs tels que le tableau et la date. La méthode d'implémentation est la suivante:

 Blog de fonction (nom, url) {this.name = name; this.url = url; this.AlerTUrl = function () {alert (this.url); }} var blog = nouveau blog ('wuyuchang', '//www.vevb.com/');console.log(blog instanceof blog); // vrai, déterminez si le blog est une instance de blog, c'est-à-dire qu'il résout le problème que le mode d'usine ne peut pas être

Cet exemple est différent du modèle d'usine, à l'exception du nom de la fonction, les chaussures prudent pour enfants doivent trouver de nombreuses différences:

La première lettre du nom de la fonction est capitalisée (bien que la norme ne stipule pas strictement que la première lettre soit capitalisée, selon la convention, la première lettre du constructeur est capitalisée.

Créer un objet non affiché

Attribuer des attributs et des méthodes directement à cet objet

Aucune déclaration de retour

Créer un objet en utilisant de nouveaux

Être capable de reconnaître les objets (c'est là que les modèles de constructeur l'emportent sur les modèles d'usine)

Bien que les constructeurs soient faciles à utiliser, ils ne sont pas sans inconvénients. Le plus gros problème avec l'utilisation des constructeurs est qu'ils doivent recréer la méthode chaque fois qu'ils créent une instance (théoriquement, les propriétés de l'objet sont différentes chaque fois qu'ils créent un objet, et les méthodes de l'objet sont les mêmes). Cependant, il n'est pas nécessaire de créer exactement la même méthode deux fois, afin que nous puissions déplacer la fonction à l'extérieur de l'objet (peut-être que certaines chaussures pour enfants ont vu les inconvénients, shhhh!).

 Blog de fonction (nom, url) {this.name = name; this.url = url; this.AlerTurl = alertUrl;} function alertUrl () {alert (this.url);} var blog = nouveau blog ('scjb51', 'http://sc.vevb.com/'), blog2 = nouveau blog.AlerTurl (); // http://sc.vevb.com/blog2.AlerTrUl (); // //www.vevb.com/

Nous définissons Alerturl sur une fonction globale, de sorte que le blog et le blog2 accèdent à la même fonction, mais le problème revient. Une fonction qui veut en fait que le blog utilise est définie dans la portée globale, qui montre que la portée mondiale est un peu digne de son nom. Ce qui est encore plus inacceptable, c'est que de nombreuses méthodes sont définies dans la portée globale qui ne sont utilisées que par des objets spécifiques. Non seulement c'est un espace gaspillé, mais il perd évidemment l'encapsulation orientée objet, donc ce problème peut être résolu par des prototypes.

Mode prototype

Chaque fonction que nous créons a un attribut prototype, qui est un pointeur vers un objet, et le but de cet objet est de contenir des propriétés et des méthodes qui peuvent être partagées par toutes les instances d'un type spécifique. L'avantage de l'utilisation d'objets prototypes est que toutes les instances d'objets peuvent partager les propriétés et les méthodes qu'il contient.

 Function Blog () {} blog.prototype.name = 'wuyuchang'; blog.prototype.url = 'http://tools.vevb.com/' ;blog.prototype.friend = [' Fr1 ',' Fr2 ',' Fr3 ',' Fr4 ']; Blog.prototype.Alertinfo = fonction () {alertr (this.name + this.UrLerl this.friend);} // Ce qui suit est le code de test var blog = new blog (), blog2 = new blog (); blog.lertInfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2,fr3,fr4blog2.AlertInfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2,fr3,fr4blog.name = 'wyc1'; blog.url = 'http: //***' '; blog.friend.pop (); blog2.name =' wyc2 '; blog2.url =' http: //++. // wyc1http: //***.comfr1,fr2,fr3blog2.AlertInfo (); // wyc2http: //++.comfr1,fr2,fr3

Le motif prototype n'est pas sans ses lacunes. Tout d'abord, il omet le lien des paramètres d'initialisation de passage du constructeur. En conséquence, toutes les instances obtiennent la même valeur d'attribut par défaut, ce qui est très gênant, mais ce n'est pas le plus gros problème du prototype. Le plus gros problème avec le schéma prototype est causé par la nature du partage. En raison du partage, une instance modifie la référence et l'autre modifie également la référence. Par conséquent, nous n'utilisons généralement pas de prototypes seuls, mais combinons des motifs de prototypes avec des modèles de constructeur.

Mode mixte (mode prototype + mode constructeur)

 Blog de fonction (nom, URL, ami) {this.name = name; this.url = url; this.friend = ami;} blog.prototype.alertinfo = function () {alert (this.name + this.url + this.friend);} var blog = nouveau blog ('wuyuchang', 'http://tools.vevb.com/', ['fr1', 'fr2', 'fr3']), Blog2 = New Blog ('WYC', ', "Fr3']),, Blog2 = 'http: //**.com', ['a', 'b']); blog.friend.pop (); blog.alertinfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2blog2.AlertInfo (); // wychttp: //**.coma,b

En mode hybride, le mode constructeur est utilisé pour définir les attributs d'instance, tandis que le mode prototype est utilisé pour définir des méthodes et des attributs partagés. Chaque instance aura son propre attribut d'instance, mais en même temps, il partage des méthodes, enregistrant la mémoire dans la mesure maximale. De plus, ce mode prend également en charge le passage des paramètres initiaux. De nombreux avantages. Ce modèle est la méthode la plus utilisée et la plus reconnue pour créer des objets personnalisés dans ECMAScript.

Mode prototype dynamique

Le mode prototype dynamique résume toutes les informations du constructeur et en initialisant le prototype dans le constructeur (seul le prototype est initialisé lorsque le premier objet est instancié), cela vous permet de choisir si le prototype doit être initialisé en jugeant si la méthode est valide.

 Blog de fonction (nom, url) {this.name = name; this.url = url; if (typeof this.lertInfo! = 'function') {// Ce code n'est exécuté qu'une fois alerte ('exe time'); Blog.prototype.lertInfo = function () {alert (thia.name + this.url); }}} var blog = nouveau blog ('wuyuchang', 'http://tools.vevb.com'), blog2 = nouveau blog ('wyc', 'http: ***. com');

Vous pouvez voir que dans l'exemple ci-dessus, la fenêtre apparaît une fois, «EXE Time», c'est-à-dire lorsque le blog est initialisé, Blog2 n'a pas besoin d'initialiser le prototype. Pour créer des objets utilisant ce modèle, il peut être considéré comme parfait.

Ce billet de blog fait référence à la troisième édition de "JavaScript Advanced Programming", mais le langage a été simplifié et les exemples ont été réécrits. Si vous avez des questions, veuillez laisser un message et une réponse, et l'auteur mettra à jour le blog.