Lorsque nous parlons d'objets, nous pouvons penser à la classe, aux objets, à l'emballage, à l'héritage, au polymorphisme. Dans le livre "JavaScript Advanced Program Design" (People's Post and Telecommunications Press, Cao Li, Zhang Xin. Le nom anglais est: JavaScript professionnel pour les développeurs Web) est décrit dans le livre. Jetons un coup d'œil aux différentes méthodes définies dans JavaScript.
1 et 1 Méthode d'usine
Créez nos propres classes et objets dans JavaScript, nous devons maîtriser.
Copier le code du code comme suit:
<script type = "text / javascript">
//définition
var ocar = nouveau objet ();
Ocar.Color = "Red";
ocar.doors = 4;
ocar.showcolor = function () {
Alerte (this.color);
}
// Appel
ocar.showColor ();
</cript>
Nous sommes faciles à utiliser des objets OCAR, mais nous créons plusieurs instances de voiture. Nous pouvons utiliser une fonction pour résumer le code ci-dessus pour implémenter:
Copier le code du code comme suit:
<script type = "text / javascript">
//définition
function createCar () {
var ocar = nouveau objet ();
Ocar.Color = "Red";
ocar.doors = 4;
ocar.showcolor = function () {
Alerte (this.color);
}
Retour OCAR;
}
// Appel
var ocar1 = createCar ();
var ocar2 = createCar ();
ocar1.color = "noir";
ocar1.showColor ();
ocar2.showColor ();
</cript>
Soit dit en passant, les attributs d'adhésion par défaut de l'objet JavaScript sont publics. De cette façon, nous l'appelons une méthode d'usine, et nous avons créé des usines qui peuvent créer et renvoyer des types d'objets spécifiques.
C'est un peu intéressant, mais dans l'objet orienté objet, la méthode de création de l'objet est:
Car car = new Car ();
L'utilisation de nouveaux mots clés a été profondément enracinée dans le cœur des gens, nous utilisons donc la méthode ci-dessus pour la définir. . Regardons la définition de la forme du constructeur.
2 Constructeur
Cette méthode ressemble un peu à une fonction d'usine. La performance spécifique est la suivante:
Copier le code du code comme suit:
<script type = "text / javascript">
//définition
Voiture de fonction (couleur, portes) {
this.color = couleur;
this.doors = portes;
this.showColor = function () {
Alerte (this.color);
};
}
// Appel
var car1 = new Car ("Red", 4);
var car2 = new car ("bleu", 4);
car1.showColor ();
car2.showColor ();
</cript>
Cela semble évident, il y a des différences. C'est un peu intéressant. Créez un objet à l'intérieur de la fonction de construction à l'aide de ces mots clés, et il semble très gentil de créer des objets à l'aide du nouveau symbole informatique. Mais il y a aussi quelques problèmes: chaque fois que le nouvel objet est créé, tous les attributs, y compris la création de la fonction, c'est-à-dire que plusieurs objets sont complètement indépendants. L'objet Car1 et l'objet Car2 sont tous les deux. C'est l'avantage de la forme originale.
3 et 3 Prototype
En utilisant l'attribut prototype de l'objet, vous pouvez voir le prototype dont dépend le nouvel objet. La méthode est la suivante:
Copier le code du code comme suit:
<script type = "text / javascript">
//définition
Fuinction Car () {
};
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.drivers = new Array ("Tom", "Jerry");
Car.prototype.showcolor = function () {
Alerte (this.color);
}
// Appel:
var car1 = new car ();
var car2 = new car ();
car1.showColor ();
car2.showColor ();
alerte (car1.drivers);
car1.drivers.push ("Stephen");
alerte (car1.Divers);
alerte (car.Drivers);
// Vous pouvez utiliser JSON pour simplifier la définition du prototype:
Car.prototype =
{{
Couleur: "rouge",
Portes: 4,
Pilotes: ["Tom", "Jerry", 'Safdad'],
showcolor: function () {
Alerte (this.color);
}
}
</cript>
Tout d'abord, le constructeur de ce code, il n'y a pas de code, puis ajouter l'attribut de l'objet pour définir l'attribut de l'objet de voiture via l'attribut prototype de l'objet. Cette méthode est très bonne, mais le problème est que l'objet de la voiture pointe vers le pointeur du tableau. Car2 également en même temps, cela n'est pas autorisé.
Dans le même temps, le problème se manifeste également dans le prototype qui ne peut apporter aucun paramètre d'initialisation, ce qui fait que le constructeur ne peut pas initialiser normalement. Cela nécessite une autre façon de résoudre: c'est le mode constructeur / prototype mixte.
4. Mode de constructeur / prototype mixte
La combinaison du constructeur et du prototype est très pratique pour définir la classe.
Copier le code du code comme suit:
<script type = "text / javascript">
//définition
Voiture de fonction (couleur, portes)
{{
this.color = couleur;
this.doors = portes;
this.drivers = new Array ("Tom", "Jerry");
}
Car.prototype.showcolor = function () {
Alerte (this.color);
}
// Appel:
var car1 = new Car ('Red', 4);
var car2 = new car ('bleu', 4);
car1.showColor ();
car2.showColor ();
alerte (car1.drivers);
car1.drivers.push ("Stephen");
alerte (car1.Divers);
alerte (car2.Drivers);
Alerte (car1 instance de voiture);
</cript>
Cette méthode consiste à définir l'attribut à l'intérieur et à utiliser le prototype pour le définir à l'extérieur. Le problème de la résolution de la troisième méthode.
Cette méthode devrait en fait être très sympathique, mais par rapport à la grammaire de Java, il devrait y avoir un peu de disharmonie, et il se sent plus désordonné pour C ++, nous ne nous sentons pas si gênants. Pour le personnel de R&D J2EE, cette méthode est toujours gênante. Il estime toujours que ce n'est pas un emballage amical. , il est considéré qu'il est plus gênant. C'est le prototype dynamique.
5. Prototype dynamique
Pour les développeurs habitués à utiliser d'autres langues, l'utilisation de constructeurs / prototypes mixtes n'est pas si harmonieux. Après tout, lors de la définition des catégories, la plupart des langages orientés objet sont visuellement emballés sur les attributs et les méthodes. Considérez la classe C # suivante:
Copier le code du code comme suit:
classe de classe // classe
{{
Color de chaîne publique = "rouge";
Portes publiques publiques = 4;
public int mpg = 23;
voiture publique (couleur de corde, portes int, int mpg) // constructeur
{{
this.color = couleur;
this.doors = portes;
this.mpg = mpg;
}
Public Void showcolor () // medhod
{{
Console.WriteLine (this.color);
}
}
C # est bien emballé tous les attributs et méthodes de la classe de voiture, donc lorsque vous voyez ce code, vous savez quelles fonctions il doit atteindre et définit les informations d'un objet. Les personnes qui critiquent le constructeur / prototype de constructeurs mixtes croient que la méthode de recherche d'attributs dans la mémoire du constructeur, et la méthode de recherche de méthodes en dehors de celle-ci n'est pas logique. Par conséquent, ils ont conçu un prototype dynamique pour fournir un style de codage plus convivial.
L'idée de base de la méthode du prototype dynamique est la même que le constructeur / prototype de la structure mixte, c'est-à-dire définir les attributs non fonctions dans le constructeur, et l'attribut de fonction est défini à l'aide de l'attribut prototype. La seule différence est la position de la méthode de l'objet. Ce qui suit est la classe de voiture réécrite par prototype dynamique:
Copier le code du code comme suit:
<script type = "text / javascript">
//définition
Fuinction Car () {
this.color = "red";
this.doors = 4;
this.drivers = new Array ("Tom", "Jerry");
ifof car._Initialized == "Undefined") {{
Car.prototype.showcolor = function () {
Alerte (this.color);
}
// ............
}
// Dernière définition
Car._Initialized = true;
}
</cript>
Jusqu'à la vérification du type de voiture. Cette ligne de code est la partie la plus importante de la méthode du prototype dynamique. Si cette valeur n'est pas définie, le constructeur continuera de définir la méthode de l'objet par prototype, puis de définir la voiture ._Initialized sur true. Si cette valeur est définie (lorsque sa valeur est vraie, la valeur du typeof est booléenne), cette méthode ne sera pas créée. En bref, cette méthode utilise le logo (_Initialized) pour déterminer s'il a donné une méthode au prototype. Cette méthode n'est créée et attribuée qu'une seule fois pour plaire aux développeurs d'OOP traditionnels, ce code ressemble plus à une définition de classe dans d'autres langues.
6 méthode d'usine hybride
Cette méthode est généralement un moyen de modifier la façon dont la méthode précédente ne peut pas être appliquée. Son objectif est de créer un faux constructeur et de ne remettre qu'un nouvel exemple d'un autre objet. Ce code semble être très similaire à la fonction d'usine:
Copier le code du code comme suit:
Fuinction Car () {
var ompcar = new object ();
ionmpcar.color = "red";
ionmpcar.doors = 4;
ionmpcar.mpg = 23;
ionmpcar.showcolor = function () {
Alerte (this.color);
}
Retour otempcar;
}
Différent de la méthode classique, cette méthode utilise le nouvel opérateur pour le faire ressembler à une fonction de structure réelle:
var ocar = new car ();
Étant donné que le nouvel opérateur est appelé à l'intérieur du constructeur Car (), le deuxième nouvel opérateur sera ignoré (situé à l'extérieur du constructeur). L'objet créé dans le constructeur est remis à la variable var. Cette méthode a les mêmes problèmes que les méthodes classiques de la méthode d'objet. Fortement recommandé: sauf si vous devez (voir le chapitre 15), vous évitez toujours cette méthode.
Résumé: (quelle méthode est utilisée)
À l'heure actuelle, le plus largement utilisé est un constructeur / prototype mixte. De plus, les prototypes dynamiques sont également très populaires et équivaut à la fonction fonctionnelle / prototype de fonction. Vous pouvez utiliser l'une de ces deux méthodes. Cependant, n'utilisez pas le constructeur ou le prototype classique, car cela introduira le code au problème.
Copier le code du code comme suit:
// ps
// classe statique (1: fonction)
varCollection = new function () {
var _carCollection = new Array ();
this.add = fonction (objcar) {
alert ('add');
}
this.get = fonction (carid) {
alert ('get');
}
}
// Classe statique (2: JSON)
var car = {
couleur: «rouge»,
Portes: 4,
showcolor: function () {alert (this.color);}
}
Car.showcolor ();