Il y a près de 20 ans, lorsque JavaScript est né, ce n'était qu'un simple langage de script Web. Si vous oubliez de remplir votre nom d'utilisateur, cela apparaîtra.
De nos jours, il est devenu presque omnipotent, avec toutes sortes d'utilisations incroyables de l'avant à l'arrière. Les programmeurs l'utilisent pour réaliser des projets de plus en plus importants.
La complexité du code JavaScript a également fortement augmenté. Une seule page Web contient 10 000 lignes de code JavaScript, qui est depuis longtemps monnaie courante. En 2010, un ingénieur a révélé que la longueur de code de Gmail est de 443 000 lignes!
Pour écrire et maintenir un code aussi complexe, des stratégies modulaires doivent être utilisées. À l'heure actuelle, l'approche traditionnelle de l'industrie est d'adopter une "programmation orientée objet". Par conséquent, la façon dont JavaScript implémente la programmation orientée objet est devenue un sujet brûlant.
Le problème est que la syntaxe Javascipt ne prend pas en charge la «classe» (classe), ce qui rend les méthodes de programmation traditionnelles orientées objet impossible à utiliser directement. Les programmeurs ont fait beaucoup d'explorations pour étudier comment simuler "classes" avec JavaScript. Cet article résume trois méthodes de la définition de «classes» JavaScript, discute des caractéristiques de chaque méthode et met l'accent sur la meilleure méthode à mes yeux.
========================================================================.
Trois façons de définir une classe en javascript
Dans la programmation orientée objet, une classe est un modèle pour un objet qui définit les propriétés et les méthodes partagées par le même groupe d'objets (également appelées "instances".
La langue JavaScript ne prend pas en charge les "classes", mais certaines solutions de contournement peuvent être utilisées pour simuler "classes".
1. Méthode du constructeur
Il s'agit d'une méthode classique et d'une méthode incontournable dans les manuels. Il utilise un constructeur pour simuler "classe" et utilise ce mot-clé pour désigner l'objet d'instance à l'intérieur.
La copie de code est la suivante:
fonction Cat () {
this.name = "gros cheveux";
}
Lors de la génération d'une instance, utilisez le nouveau mot-clé.
La copie de code est la suivante:
var cat1 = new Cat ();
alerte (cat1.name); // gros cheveux
Les propriétés et les méthodes de la classe peuvent également être définies sur l'objet prototype du constructeur.
La copie de code est la suivante:
Cat.prototype.makesound = function () {
alerte ("miaulement");
}
Pour une introduction détaillée à cette méthode, veuillez consulter la série d'articles que j'ai écrits "" Programmation orientée objet JavaScript ", je n'en parlerai pas ici. Son principal inconvénient est qu'il est relativement complexe et utilise ceci et le prototype, qui est très laborieux à écrire et à lire.
2. Méthode object.create ()
Afin de résoudre les lacunes de la "méthode du constructeur" et pour générer plus de manière plus pratique des objets, la cinquième édition d'ECMascript, la norme internationale de JavaScript (la troisième édition est actuellement disponible), a proposé une nouvelle méthode objet.Create ().
En utilisant cette méthode, une "classe" est un objet, pas une fonction.
La copie de code est la suivante:
var cat = {
Nom: "Big Hair",
Makeound: fonction () {alert ("Meow Meow Meow"); }
};
Ensuite, utilisez Object.Create () directement pour générer une instance sans utiliser nouveau.
La copie de code est la suivante:
var cat1 = object.create (cat);
alerte (cat1.name); // gros cheveux
Cat1.makesound (); // miaou miaou miaou miaou
Actuellement, les dernières versions des principaux navigateurs (y compris IE9) ont déployé cette méthode. Si vous rencontrez un ancien navigateur, vous pouvez utiliser le code suivant pour le déployer vous-même.
La copie de code est la suivante:
if (! object.create) {
Object.create = function (o) {
fonction f () {}
F.prototype = o;
retourner nouveau f ();
};
}
Cette méthode est plus simple que la "méthode du constructeur", mais elle ne peut pas implémenter des attributs privés et des méthodes privées, et les données ne peuvent pas être partagées entre les objets d'instance, de sorte que la simulation des "classes" n'est pas suffisamment complète.
3. Loi minimaliste
Le programmeur néerlandais Gabor de Moij a proposé une nouvelle approche qui était meilleure que Object.Create (), qu'il a appelé "une approche minimaliste". C'est aussi la méthode que je recommande.
3.1 Emballage
Cette méthode n'utilise pas ceci et le prototype, et le code est très simple à déployer, c'est probablement pourquoi il est appelé "loi minimaliste".
Tout d'abord, il utilise également un objet pour simuler "classe". Dans cette classe, définissez un constructeur CreateEnew () pour générer une instance.
La copie de code est la suivante:
var cat = {
createenew: function () {
// du code ici
}
};
Ensuite, dans CreateEnew (), définissez un objet d'instance et utilisez cet objet d'instance comme valeur de retour.
La copie de code est la suivante:
var cat = {
createenew: function () {
var cat = {};
cat.Name = "Big Hair";
Cat.Makesound = function () {alert ("Meow Meow"); };
retour chat;
}
};
Lorsque vous l'utilisez, appelez la méthode CreateEnew () pour obtenir l'objet d'instance.
La copie de code est la suivante:
var cat1 = cat.createenew ();
Cat1.makesound (); // miaou miaou miaou miaou
L'avantage de cette approche est qu'il est facile à comprendre, a une structure claire et élégante et est conforme à la construction traditionnelle "de programmation orientée objet", de sorte que les caractéristiques suivantes peuvent être facilement déployées.
3.2 Héritage
Il est très pratique d'implémenter une classe dans la classe suivante. Appelez simplement la méthode CreateEnew () de ce dernier dans la méthode CreateEnew ().
Définissez d'abord une classe animale.
La copie de code est la suivante:
var animal = {
createenew: function () {
var animal = {};
Animal.Sleep = function () {alert ("Sleep in"); };
Animal de retour;
}
};
Ensuite, dans la méthode Creenew () de Cat, la méthode CreateEnew () d'Animal est appelé.
La copie de code est la suivante:
var cat = {
createenew: function () {
var chat = animal.CreateEnew ();
cat.Name = "Big Hair";
Cat.Makesound = function () {alert ("Meow Meow"); };
retour chat;
}
};
L'instance de chat obtenue de cette manière héritera à la fois de la classe de chat et de la classe animale.
La copie de code est la suivante:
var cat1 = cat.createenew ();
Cat1.Sleep (); // Dormez
3.3 Attributs privés et méthodes privées
Dans la méthode CreateEnew (), tant que les méthodes et les propriétés qui ne sont pas définies sur l'objet CAT sont privées.
La copie de code est la suivante:
var cat = {
createenew: function () {
var cat = {};
var son = "Meow Meow Meow";
cat.makesound = function () {alert (son); };
retour chat;
}
};
Le son variable interne dans l'exemple ci-dessus ne peut pas être lu en externe et ne peut être lu que via la méthode publique de Cat Makeound ().
La copie de code est la suivante:
var cat1 = cat.createenew ();
alerte (cat1.sound); // indéfini
3.4 Partage de données
Parfois, nous avons besoin de tous les objets d'instance pour pouvoir lire et écrire les mêmes données internes. À l'heure actuelle, résumez simplement ces données internes à l'intérieur de l'objet de classe et en dehors de la méthode CreateEnew ().
La copie de code est la suivante:
var cat = {
Sound: "Meow Meow Meow",
createenew: function () {
var cat = {};
cat.makesound = function () {alert (cat.sound); };
Cat.ChangeSound = fonction (x) {cat.sound = x; };
retour chat;
}
};
Ensuite, deux objets d'instance sont générés:
La copie de code est la suivante:
var cat1 = cat.createenew ();
var cat2 = cat.createenew ();
Cat1.makesound (); // miaou miaou miaou miaou
Pour le moment, s'il existe un objet d'instance et que les données partagées sont modifiées, l'autre objet d'instance sera également affecté.
La copie de code est la suivante:
Cat2.ChangeSound ("Lalala");
Cat1.makesound (); // Lalala
(sur)