Comprendre la portée en JavaScript

Ce sujet a été abordé à plusieurs reprises, néanmoins, j'aimerais parler de ce qu'est la portée (en utilisant JavaScript) du point de vue du problème qu'il est censé résoudre.

Quel problème la portée résout-elle réellement ?

À mesure que la taille des applications augmente, leur complexité augmente également : la portée est un outil permettant de gérer une telle complexité.

Couplage vs découplage

Supposons que nous ayons un rayon variable global fixé à 7 et une fonction createSpecialButton() qui renvoie un bouton « spécial » :

let radius = 7;

function createSpecialButton(radius) {
  return <button radius={radius}>Click Me!</button>
}

const button = createSpecialButton(radius);

Cette fonction renvoie un bouton avec un rayon spécifique, qui dans ce cas est défini sur 7. Pour l'instant, il n'y a aucun problème avec le code, car nous savons quel est le rayon défini et savons donc quel sera le bouton résultant. ressembler. Cependant, que se passe-t-il si nous ajoutons deux fonctions supplémentaires qui dépendent toutes deux de la variable de rayon ? Notre code ressemble maintenant à ceci :

let radius = 7;

function createSpecialButton() {
  return <button radius={radius}>Click Me!</button>
}

function profileButton() {
  radius = 10;
  return <button radius={radius}>Click Me!</button>
}

function registrationButton() {
  radius = 16;
  return <button radius={radius}>Click Me!</button>
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

Après avoir effectué cette modification, quelle sera la valeur de radius lors de l'appel de createSpecialButton() ? Si vous avez deviné 16, vous auriez raison.

En ajoutant simplement deux fonctions supplémentaires, nous avons considérablement augmenté la complexité de notre code et vivons désormais dans un monde dans lequel plusieurs morceaux de code non liés reposent sur la même dépendance. Maintenant, imaginez qu'il s'agisse d'une application full-stack beaucoup plus volumineuse : il deviendrait rapidement difficile de déterminer d'où proviennent certains éléments d'État et comment corriger les bugs lorsqu'ils surviennent.

Pour résoudre ce problème, nous pouvons définir des variables de rayon distinctes pour chaque fonction :

function createSpecialButton() {
  const radius = 7;
  return <button radius={radius}>Click Me!</button>
}

function profileButton() {
  const radius = 10;
  return <button radius={radius}>Click Me!</button>
}

function registrationButton() {
  const radius = 16;
  return <button radius={radius}>Click Me!</button>
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

Vous pourriez regarder ce changement et dire « eh bien, ok, mais maintenant il y a plus de code – cela ne semble pas correct ». C'est exact, il y a plus de code, mais moins de code n'est pas meilleur si cela entraîne un code moins maintenable - le changement que nous avons apporté améliore la maintenabilité de notre code, et c'est toujours une bonne chose.

Types de portée en JavaScript

Portée mondiale

La portée mondiale est accessible par tout dans l'ensemble de votre application. Si vous écrivez une application Node.JS, vous ne travaillerez probablement pas avec ou ne rencontrerez pas de portée globale. Cependant, si vous travaillez dans une application Web, vous pouvez placer les déclarations dans une portée globale en utilisant une balise de script ou en utilisant window.SOMETHING.

Par exemple, en utilisant la balise script, vous pourriez faire quelque chose comme ceci :

<script>
  let username = "Garrett";
</script>

En outre, MDN exprime sa définition de la « portée globale » comme « la portée par défaut pour tout le code exécuté en mode script ». Je pense que l'exemple ci-dessus est ce à quoi ils font référence.

Lorsque vous utilisez l'objet global window, vous pouvez faire quelque chose comme ceci :

  window.username = "Garrett";

Portée du module

Si vous travaillez dans un projet Node.JS, la portée du module est ce avec quoi vous travaillerez au plus haut niveau. Chaque fichier avec une extension .js (ou .ts) est un module distinct, ce qui signifie qu'au maximum vos déclarations seront accessibles par tout ce qui se trouve dans un fichier donné, sauf si vous les exportez explicitement.

Par exemple, dans user.ts, les deux fonctions peuvent accéder au nom de la variable.

// user.ts

const name = "Garrett";

function greet() {
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

Cependant, dans cette version de user.ts, seul accessName() peut accéder au nom de la variable :

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

Notez que dans ces deux modules, rien n'est exporté. En d’autres termes, le code des autres modules n’a aucun moyen de connaître ce code et ne peut donc pas l’importer et l’utiliser. Nous pouvons cependant changer cela :

// user.ts

export function greet(name: string) {
  console.log("Hello, ", name)
}

Désormais, les deux fonctions sont exportées, et peuvent ainsi être utilisées par d'autres modules. Ceci est techniquement différent du concept de portée globale dont nous avons parlé plus tôt, mais il est similaire dans le sens où nous rendons le code disponible pour l'ensemble de l'application en l'important d'un module à un autre.

Portée de la fonction

Nous avons en fait déjà vu la portée des fonctions. Découvrez le code ci-dessous (c'est le même code que celui de l'un des extraits ci-dessus) :

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

Essayez d'exécuter ceci - greetAgain() générera une erreur car la variable de nom qu'elle essaie de lire n'existe que dans le contexte (c'est-à-dire la « portée ») de greet().

Remarque : vous pourriez voir cela appelé « portée locale ».

Portée du bloc

La portée du bloc est intéressante car elle ne fonctionne qu'avec les types de variables les plus récents - en particulier let et const, pas var. Jetons un coup d'oeil.

{
  let firstName = "Garrett";
  const lastName = "Love";
  var fullName = "Garrett Love";
  // firstName and lastName CAN be accessed here
  // fullName CAN be accessed here
}

// firstName and lastName CANNOT be accessed here
// fullName CAN STILL be accessed here

Dans l'exemple ci-dessus, nous pouvons voir que 1) Placer du code dans un {} crée un bloc de code. 2) Les variables définies à l'aide de let et const ne sont accessibles que dans ce bloc de code. 3) La variable créée avec var ne suit pas les règles de portée du bloc, car elle est toujours accessible en dehors du {}.

Remarque : le JavaScript moderne utilise let et const pour les déclarations de variables et non var.

Les déclarations doivent être faites dans la plus petite portée nécessaire

En conclusion, rappelez-vous que la portée est un outil pour gérer la complexité de notre code, et plus le niveau de portée des déclarations est élevé, plus il y aura de complexité dans votre code, il est donc préférable de viser des déclarations à être placé dans la plus petite portée nécessaire.

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!