Implémentation de variables privées en javascript

JavaScript, le langage de programmation qui habilite le World Wide Web, est devenu une technologie largement utilisée et polyvalente depuis sa création de Brendan Eich en mai 1995. Malgré son succès, il a également reçu des critiques considérables, en particulier certaines fonctionnalités. Par exemple, un objet est coulé sur une chaîne lorsqu'il est utilisé comme index, 1 == "1" renvoie True, ou l'infâme confondant this mot-clé. Cependant, une caractéristique particulièrement intéressante est l'existence de diverses techniques qui implémentent la confidentialité variable.

Actuellement, il n'y a aucun moyen de créer directement des variables privées dans JavaScript. Dans d'autres langues, vous pouvez utiliser des mots clés private ou des doubles soulignements et tout fonctionne bien, mais en JavaScript, la privatin variable a des fonctionnalités qui la rendent plus similaire aux caractéristiques émergentes de la langue que la fonctionnalité attendue. Présentons d'abord le contexte de notre question.

Mot-clé var

Jusqu'en 2015, il n'y avait essentiellement qu'une seule façon de créer des variables, et c'était le mot-clé var . var est de la fonction de fonction, ce qui signifie que les variables instanciées avec ce mot-clé ne peuvent être accessibles que par code dans la fonction. Dans le cas où la fonction est externe ou essentiellement "globale", la variable sera accessible par tout ce qui est exécuté après la définition de la variable. Si vous essayez d'accéder à la variable dans la même portée avant sa définition, vous serez undefined au lieu d'une erreur. Cela est dû à la manière "de mise à niveau" du mot clé var .

 // définir "A" dans la portée mondiale
var a = 123;

// définir "B" dans la portée de la fonction
(fonction() {
  console.log (b); // => En raison de la promotion, "Undefined" est renvoyé au lieu d'une erreur.
  var b = 456;
}) ();

console.log (a); // => 123
console.log (b); // lève une exception "ReferenceError" car "b" ne peut pas être accessible à partir de l'extérieur de la portée de la fonction.

La naissance des variables ES6

En 2015, ES6 / ES2015 a été officiellement publié et suivi de deux nouveaux mots clés variables: let et const . Les deux sont scoés en blocs, ce qui signifie que les variables créées avec ces mots clés sont accessibles par n'importe quoi dans la même paire de supports. Identique à var , mais les variables let et const ne peuvent pas être accessibles dans les lunettes de bloc extérieures telles que les boucles, les fonctions, les instructions, les supports, etc.

 const a = 123;

// Bloquer l'exemple de la portée # 1
if (true) {
  const b = 345;
}

// Bloquer l'exemple de la portée # 2
{
  const c = 678;
}

console.log (a); // 123
console.log (b); // lève "ReferenceError" car "b" ne peut pas être accessible depuis l'extérieur de la portée du bloc.
console.log (c); // lève "ReferenceError" car "b" ne peut pas être accessible depuis l'extérieur de la portée du bloc.

Étant donné que le code en dehors de la portée ne peut pas accéder aux variables, nous obtenons l'émergence de la privatin. Nous présenterons certaines techniques pour la mettre en œuvre de différentes manières.

Utilisation de fonctions

Étant donné que les fonctions dans JavaScript sont également des blocs, tous les mots clés variables fonctionnent avec eux. De plus, nous pouvons implémenter un modèle de conception très utile appelé "module".

Mode de conception du module

Google s'appuie sur le dictionnaire d'Oxford pour définir des "modules":

Le programme peut en construire ou analyser l'une des unités différentes mais interdépendantes d'activités complexes.

- Définition de «module» 1.2

Le modèle de conception du module est très utile en JavaScript car il combine des composants publics et privés et nous permet de décomposer les programmes en composants plus petits, exposant uniquement la partie d'une autre partie du programme qui devrait pouvoir accéder via un processus appelé "encapsulation". De cette façon, nous exposons seulement ce que nous devons utiliser et masquer ce que nous n'avons pas besoin de voir. Nous pouvons le faire en tirant parti de la portée de la fonction.

 const Carmodule = () => {
  Soit Milesdriven = 0;
  Soit Speed ​​= 0;

  const Accelerate = (montant) => {
    vitesse = montant;
    milesDriven = vitesse;
  }

  const getMilesDriven = () => milesDriven;

  // En utilisant le mot clé "Return", vous pouvez contrôler le contenu exposé et quel contenu est masqué. Dans ce cas, nous exposons uniquement les fonctions Accelerate () et GetMileDriven ().
  retour {
    accélérer,
    GetmilesDriven
  }
};

const testCarmodule = carmodule ();
TestCarmodule.accelerate (5);
testCarmodule.accerate (4);
console.log (testCarmodule.getMilesDriven ());

De cette façon, nous pouvons obtenir un kilométrage et une accélération, mais comme l'utilisateur n'a pas besoin d'accès dans ce cas, nous pouvons le masquer en exposant uniquement accelerate() et getMilesDriven() . Essentiellement, speed est une variable privée car elle ne peut être accessible que par le code dans la même portée. Les avantages des variables privées commencent à devenir clairs dans ce cas. Lorsque vous supprimez la possibilité d'accéder aux variables, aux fonctions ou à tout autre composant interne, vous réduisez la surface qui est à tort par d'autres par d'autres par d'autres qui n'auraient pas dû être utilisées.

Une autre façon

Dans ce deuxième exemple, vous remarquerez l'ajout de this mot-clé. Il existe une différence entre la fonction flèche ES6 (=>) et la fonction traditionnelle () {}. Avec function vous pouvez this utiliser, qui se liera à la fonction elle-même, et la fonction flèche ne permet pas l'utilisation de tout type de this mot-clé. Les deux sont des moyens tout aussi efficaces de créer des modules. L'idée principale est de divulguer les pièces qui devraient être accessibles et de conserver d'autres pièces qui ne doivent pas être interagies, il y a donc des données publiques et privées.

 fonction carmodule () {
  Soit Milesdriven = 0;
  Soit Speed ​​= 0;

  // Dans ce cas, nous utilisons plutôt le mot-clé "ce"
  // il fait référence à la carmodule
  this.accelerate = (montant) => {
    vitesse = montant;
    milesDriven = vitesse;
  }

  this.getMilesDriven = () => milesDriven;
}

const testCarmodule = new Carmodule ();
TestCarmodule.accelerate (5);
testCarmodule.accerate (4);
console.log (testCarmodule.getMilesDriven ());

Classe ES6

Les classes sont une autre nouvelle fonctionnalité dans ES6. Les classes sont essentiellement du sucre syntaxique - en d'autres termes, toujours une fonction, mais peuvent la "embellir" en une forme plus facilement exprimée. Pour les classes, la confidentialité variable (à partir de maintenant) est presque impossible à moins que certaines modifications majeures ne soient apportées au code.

Regardons un exemple de classe.

 classe carmodule {
  / *
    milesDriven = 0;
    vitesse = 0;
  * /
  constructeur () {
    this.milesDriven = 0;
    this.speed = 0;
  }
  accélérer (montant) {
    this.speed = montant;
    this.milesDriven = this.speed;
  }
  getMilesDriven () {
    Renvoyez ceci.MilesDriven;
  }
}

const testCarmodule = new Carmodule ();
TestCarmodule.accelerate (5);
testCarmodule.accerate (4);
console.log (testCarmodule.getMilesDriven ());

La première chose à noter est que milesDriven et speed sont situées dans constructor() . Notez que vous pouvez également définir des variables en dehors du constructeur (comme indiqué dans les commentaires du code), mais ils sont fonctionnellement les mêmes de toute façon. Le problème est que ces variables seront publiques et sont accessibles par des éléments en dehors de la classe.

Jetons un coup d'œil à certaines solutions à ce problème.

Utiliser un soulignement

Dans les situations où la confidentialité est d'empêcher les collaborateurs de commettre des erreurs catastrophiques, en utilisant un soulignement (_) comme préfixe variable, bien qu'il soit toujours "visible" à l'extérieur, suffit pour signaler au développeur, "ne touchez pas cette variable". Ainsi, par exemple, nous avons maintenant ce qui suit:

 // Ceci est le nouveau constructeur de la classe. Notez qu'il peut également être représenté comme le contenu suivant en dehors du constructeur ().
/ *
  _MilesDriven = 0;
  _Speed ​​= 0;
* /
constructeur () {
  this._milesDriven = 0;
  this._speed = 0;
}

Bien que cela fonctionne pour ses cas d'utilisation spécifiques, il est toujours sûr de dire qu'il n'est pas idéal à bien des égards. Vous pouvez toujours accéder aux variables, mais vous devez également modifier le nom de la variable.

Mettez tout dans le constructeur

Techniquement, il existe en effet un moyen d'utiliser des variables privées dans une classe, qui est de mettre toutes les variables et méthodes dans constructor() . Jetons un coup d'œil.

 classe carmodule {
  constructeur () {
    Soit Milesdriven = 0;
    Soit Speed ​​= 0;

    this.accelerate = (montant) => {
      vitesse = montant;
      milesDriven = vitesse;
    }

    this.getMilesDriven = () => milesDriven;
  }
}

const testCarmodule = new Carmodule ();
TestCarmodule.accelerate (5);
testCarmodule.accerate (4);
console.log (testCarmodule.getMilesDriven ());
console.log (testCarmodule.Speed); // Undefined - nous avons maintenant une véritable confidentialité variable.

Cette approche met en œuvre une véritable confidentialité de la variable car il n'y a pas d'accès direct à une variable qui n'est pas divulguée intentionnellement. Le problème est que nous avons maintenant, eh bien, pas un très bon code par rapport au nôtre, et cela brise également les avantages du sucre de syntaxe lorsque nous utilisons des cours. Pour le moment, nous pourrions aussi bien utiliser function() .

Utilisation de Faiblemap

Il existe également un moyen plus créatif de créer des variables privées, qui est d'utiliser WeakMap() . Bien que cela puisse sembler similaire à Map , les deux sont très différents. Bien que le mappage puisse prendre n'importe quel type de valeur en tant que clé, WeakMap accepte uniquement les objets et supprime les valeurs dans WeakMap lorsque Garbage collecte des clés d'objet. De plus, WeakMap ne peut pas itérater, ce qui signifie que vous devez accéder à une référence à la clé d'objet pour accéder à la valeur. Cela le rend très utile pour créer des variables privées, car les variables sont en fait invisibles.

 classe carmodule {
  constructeur () {
    this.data = new faiblemap ();
    this.data.set (this, {
      Miles-Driven: 0,
      vitesse: 0
    });
    this.getMilesDriven = () => this.data.get (this) .milesDriven;
  }

  accélérer (montant) {
    // Dans cette version, nous créons plutôt un mot faible et // utilisons le mot-clé "ce" comme clé, ce qui est peu probable // sera accidentellement utilisé comme clé pour le faiblemap.
    const data = this.data.get (this);
    const Speed ​​= Data.peed Montant;
    const milesDriven = data.mileDriven data.speed;
    this.data.set ({Speed, MilesDriven});
  }

}

const testCarmodule = new Carmodule ();
TestCarmodule.accelerate (5);
testCarmodule.accerate (4);
console.log (testCarmodule.getMilesDriven ());
console.log (testCarmodule.data); // => faiblemap {[éléments inconnus]} - ces données ne peuvent pas être facilement accessibles à partir de l'extérieur!

Cette solution est bonne pour prévenir l'utilisation accidentelle des données, mais elle n'est pas vraiment privée, car elle peut encore être accessible de l'extérieur en this remplaçant par CarModule . De plus, il ajoute un peu de complexité et n'est donc pas la solution la plus élégante.

Utiliser des symboles pour éviter les conflits

Si le but est d'éviter les conflits de noms, vous pouvez utiliser Symbol pour fournir une solution utile. Ce sont essentiellement des cas qui peuvent agir comme des valeurs uniques, et elles n'égalent jamais d'autre valeur, sauf sa propre instance unique. En voici un exemple dans les applications réelles:

 classe carmodule {
  constructeur () {
    this.SpeedKey = symbol ("SpeedKey");
    this.milesDrivenKey = symbol ("milesdrivenkey");
    this [this.speedKey] = 0;
    this [this.milesDrivenKey] = 0;
  }

  accélérer (montant) {
    // Ces données sont presque impossibles pour accéder de façon inattendue. Ce n'est en aucun cas privé.
    // Mais il reste à l'écart de toute personne qui implémentera ce module.
    this [this.speedkey] = montant;
    this [this.milesDriveny] = this [this.speedKey];
  }

  getMilesDriven () {
    Renvoyez ceci [this.milesDrivenKey];
  }
}

const testCarmodule = new Carmodule ();
TestCarmodule.accelerate (5);
testCarmodule.accerate (4);
console.log (testCarmodule.getMilesDriven ());
console.log (testCarmodule.Speed); // => Undefined - nous devons accéder à la touche interne pour accéder à la variable.

Comme la solution de soulignement, cette approche repose plus ou moins sur les conventions de dénomination pour éviter la confusion.

Proposition de terrain de classe privée TC39

Récemment, une nouvelle proposition a été proposée qui introduirait des variables privées à la classe. C'est simple: consultez le nom de la variable et il devient privé. Aucune modification structurelle supplémentaire n'est requise.

 classe carmodule {
  #Speed ​​= 0
  #milesDriven = 0

  accélérer (montant) {
    // Ces données sont presque impossibles pour accéder de façon inattendue.
    this. # speed = montant;
    ce. # milesDriven = Speed;
  }

  getMilesDriven () {
    Retour. # MilesDriven;
  }
}

const testCarmodule = new Carmodule ();
TestCarmodule.accelerate (5);
testCarmodule.accerate (4);
console.log (testCarmodule.getMilesDriven ());
console.log (testCarmodule.Speed); // => Undefined - nous devons accéder à la touche interne pour accéder à la variable.

Les fonctionnalités de classe privée sont devenues une réalité et ont un assez bon support de navigateur.

en conclusion

Ceci est un résumé des différentes façons d'implémenter des variables privées en JavaScript. Il n'y a pas d'approche "correcte". Ces méthodes conviennent à différentes exigences, bases de code existantes et autres contraintes. Bien que chaque approche ait ses avantages et ses inconvénients, en fin de compte, toutes les approches sont tout aussi efficaces tant qu'elles résolvent efficacement votre problème.

Merci d'avoir lu! J'espère que cela vous donne un aperçu de la façon d'appliquer la portée et la confidentialité des variables pour améliorer votre code JavaScript. Il s'agit d'une technologie puissante qui prend en charge de nombreuses méthodes différentes et rend votre code plus facile à utiliser et sans erreur. Essayez vous-même de nouveaux exemples pour avoir une meilleure sensation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!