Compréhension approfondie de la série JavaScript (26) : Explication détaillée du modèle de constructeur des compétences design patterns_javascript

Présentation

Tout le monde connaît les constructeurs, mais si vous êtes novice, encore faut-il comprendre ce qu'est un constructeur. Un constructeur est utilisé pour créer un objet d'un type spécifique - non seulement il déclare l'objet à utiliser, mais le constructeur peut également accepter des paramètres pour définir les valeurs des membres de l'objet lors de la première création de l'objet. Vous pouvez personnaliser votre propre constructeur et y déclarer des propriétés ou des méthodes d'objets de type personnalisé.

Utilisation de base

En JavaScript, les constructeurs sont généralement utilisés pour implémenter des instances. JavaScript n'a pas le concept de classes, mais il existe des constructeurs spéciaux. En appelant la fonction définie à l'aide du mot-clé new, vous pouvez indiquer à JavaScript que vous souhaitez créer un nouvel objet et les déclarations de membre du nouvel objet sont toutes définies dans le constructeur. À l'intérieur du constructeur, le mot-clé this fait référence à l'objet nouvellement créé. L'utilisation de base est la suivante :

Copier le code Le code est le suivant :

fonction Voiture (modèle, année, miles) {
This.model = modèle;
Cette.année = année ;
This.miles = miles;
This.output=fonction () {
          return this.model "Gone" this.miles "Kilometers";
};
>

var tom= new Car("Oncle", 2009, 20000);
var dudu= nouvelle voiture("Dudu", 2010, 5000);

console.log(tom.output());
console.log(dudu.output());

L'exemple ci-dessus est un modèle de constructeur très simple, mais il présente quelques problèmes. Tout d'abord, l'utilisation de l'héritage est très gênante. Deuxièmement, output() est redéfini à chaque fois qu'un objet est créé. Le meilleur moyen est de laisser toutes les instances du type Car partager cette méthode output(), de sorte que s'il y en a une grande. nombre d'instances Si c'est le cas, cela économisera beaucoup de mémoire.

Pour résoudre ce problème, nous pouvons utiliser les méthodes suivantes :

Copier le code Le code est le suivant :

fonction Voiture (modèle, année, miles) {
This.model = modèle;
Cette.année = année ;
This.miles = miles;
This.output= formatCar;
>

fonction formatCar() {
Renvoyez this.model "Gone" this.miles "Kilometers";
>

Bien que cette méthode soit disponible, nous avons une meilleure méthode comme suit.

Constructeur et prototype

La fonction en JavaScript a un attribut de prototype appelé prototype. Lorsqu'un constructeur est appelé pour créer un objet, tous les attributs du prototype du constructeur sont disponibles sur l'objet nouvellement créé. Selon cela, plusieurs instances d'objet Car peuvent partager le même prototype. Développons le code de l'exemple ci-dessus :
.

Copier le code Le code est le suivant :

fonction Voiture (modèle, année, miles) {
This.model = modèle;
Cette.année = année ;
This.miles = miles;
>

/*
Remarque : Ici, nous utilisons le nom de la méthode Object.prototype au lieu de Object.prototype
. Principalement utilisé pour éviter de réécrire l'objet prototype prototype défini
*/
Car.prototype.output=fonction () {
Renvoyez this.model "Gone" this.miles "Kilometers";
};

var tom = new Car("Oncle", 2009, 20000);
var dudu = nouvelle voiture("Dudu", 2010, 5000);

console.log(tom.output());
console.log(dudu.output());

Ici, l'instance unique output() peut être partagée entre toutes les instances de l'objet Car.

Aussi : Nous recommandons aux constructeurs de commencer par une majuscule pour les distinguer des fonctions ordinaires.

Puis-je utiliser uniquement du neuf ?

Les exemples ci-dessus utilisent tous new pour créer des objets pour la voiture fonctionnelle. Est-ce le seul moyen ? En fait, il existe d'autres moyens, nous en énumérons deux :

Copier le code Le code est le suivant :

fonction Voiture (modèle, année, miles) {
This.model = modèle;
Cette.année = année ;
This.miles = miles;
// Personnaliser un contenu de sortie
This.output = function () {
          return this.model "Gone" this.miles "Kilometers";
>
>

//Méthode 1 : Appel en fonction
Car("Oncle", 2009, 20000); //Ajouter à l'objet fenêtre
console.log(window.output());

//Méthode 2 : Appel dans le cadre d'un autre objet
var o = nouvel Objet();
Car.call(o, "Dudu", 2010, 5000);
console.log(o.output());

La méthode 1 de ce code est un peu spéciale. Si vous n'utilisez pas new pour appeler la fonction directement, cela pointe vers la fenêtre de l'objet global :
.

Copier le code Le code est le suivant :

//Appel en fonction
var tom = Voiture("Oncle", 2009, 20000);
console.log(typeof tom); // "non défini"
console.log(window.output()); // "Oncle a parcouru 20 000 kilomètres"

Pour le moment, l'objet tom n'est pas défini et window.output() affichera le résultat correctement. Cependant, si vous utilisez le nouveau mot-clé, il n'y aura pas de problème de ce type :
.

Copier le code Le code est le suivant :

//Utiliser un nouveau mot-clé
var tom = new Car("Oncle", 2009, 20000);
console.log(typeof tom); // "objet"
console.log(tom.output()); // "Oncle a parcouru 20 000 kilomètres"

Forcer le nouveau

L'exemple ci-dessus montre le problème de ne pas utiliser new, y a-t-il donc un moyen pour nous de forcer le constructeur à utiliser le nouveau mot-clé ? La réponse est oui, le code ci-dessus :

Copier le code Le code est le suivant :

fonction Voiture (modèle, année, miles) {
Si (!(cette instance de Car)) {
         retourner une nouvelle voiture (modèle, année, miles) ;
>
This.model = modèle;
Cette.année = année ;
This.miles = miles;
This.output = function () {
          return this.model "Gone" this.miles "Kilometers";
>
>

var tom = new Car("Oncle", 2009, 20000);
var dudu = Voiture("Dudu", 2010, 5000);

console.log(typeof tom); // "objet"
console.log(tom.output()); // "Oncle a parcouru 20 000 kilomètres"
console.log(typeof dudu); // "objet"
console.log(dudu.output()); // "Dudu a parcouru 5000 kilomètres"

En jugeant si l'instance de this est Car, vous pouvez décider de renvoyer new Car ou de continuer à exécuter le code si le nouveau mot-clé est utilisé, (cette instance de Car) est vraie et l'affectation des paramètres suivante se poursuivra si new. n'est pas utilisé, (cette instance de Car) est fausse et une nouvelle instance sera renvoyée.

Fonction wrapper originale

Il existe trois fonctions wrapper primitives en JavaScript : nombre, chaîne, booléen. Parfois, les deux sont utilisées :
.

Copier le code Le code est le suivant :

// Utiliser la fonction wrapper d'origine
var s = new String("ma chaîne");
var n = nouveau Nombre (101);
var b = nouveau Boolean(true);

// Ceci est recommandé
var s = "ma chaîne";
var n = 101;
var b = vrai;

Il est recommandé d'utiliser ces fonctions wrapper uniquement lorsque vous souhaitez conserver l'état numérique. Pour la différence, veuillez vous référer au code suivant :
.

Copier le code Le code est le suivant :

// chaîne d'origine
var greet = "Bonjour";
// Divisez
en utilisant la méthode split() greet.split(' ')[0]; // "Bonjour"
// Aucune erreur ne sera signalée lors de l'ajout de nouveaux attributs aux types primitifs
greet.smile = true;
// Il n'y a aucun moyen d'obtenir cette valeur (nous avons expliqué pourquoi au chapitre 18 Implémentation d'ECMAScript)
console.log(typeof greet.smile); // "non défini"

//chaîne originale
var greet = new String("Bonjour");
// Divisez
en utilisant la méthode split() greet.split(' ')[0]; // "Bonjour"
// L'ajout de nouveaux attributs au type de fonction wrapper ne provoquera pas d'erreur
greet.smile = true;
// Les nouvelles propriétés sont accessibles normalement
console.log(typeof greet.smile); // "booléen"

Résumé

Ce chapitre explique principalement comment utiliser le modèle de constructeur, comment l'appeler et la différence entre le nouveau mot-clé. J'espère que tout le monde y prêtera attention lorsqu'il l'utilisera.

Référence : http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript