Rédaction de ce guide pour le père qui construit alis4ops.com.

• Je m'appelle "Baba".
• Il apprend à créer des applications Web, anciennement ingénieur électricien.
• Laissera quelques notes autour de l'article faisant référence à lui, afin que toute personne sur interwebz lisant ceci puisse ignorer ces lignes. J'espère que cela ne vous dérange pas !

Contexte

Nous avons les fonctions suivantes :

• handleStartTouch
• handleMoveTouch

Baba défini dans DragDrop.js

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}

function handleMoveTouch(event) {
    event.preventDefault()
    if (draggedElement) {
        const touch = event.touches[0];
        // ..more code
    }
}

Remarquez que nous accédons à draggedElement en ligne :

• if (draggedElement) {

hanldeMoveTouch ne génère pas d'erreur lors de son appel.

Placer un point d'arrêt sur if (draggedElement) dans Chrome DevTools montrera que draggedElement se résout en le même élément HTML fourni par event.target dans handleStartTouch

Problème

Pourquoi pouvons-nous accéder à draggedElement dans handleMoveTouch même s'il est défini dans handleStartTouch

De manière plus générique, pourquoi peut-on accéder à une variable qui a été définie dans une fonction dans une autre fonction en javascript ?

Explication

Regardez la fonction handleStartTouch :

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}

Plus précisément la ligne :

    draggedElement = event.target;

Il ne déclare pas le nom de la variable draggedElement en utilisant l'un ou l'autre des mots-clés

• const
• laisser
• var

Par exemple, nous ne le définissons pas ainsi :

    const draggedElement = event.target;

Déclaration de variable (alias mots-clés)

En Javascript, lorsque nous n'utilisons pas les déclarations de variables (également appelées mots-clés), javascript considère cette variable comme une variable globale.

Exercice

Considérez l'exemple suivant dans lequel nous définissons deux fonctions :

// Takes in two arguments and returns the sum
function add(x, y) {
  sum = x   y
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}

Ouvrez DevTools dans Chrome

• accéder à "Console"
• Copiez et collez le code ci-dessus
• Appuyez sur Entrée
• Il reviendra indéfini, c'est très bien.

Dans la console, appelez add(1,1)

• vous verrez la console revenir 2

add(1,1)
=> 2

Puis appelez printStatus

• Vous verrez la sortie Somme : 2

Nous pouvons voir que printStatus() peut accéder à la somme variable définie dans add(x, y)

Cela est dû au fait que la somme variable est déclarée sans les mots-clés suivants :

• somme = x y

Modifions maintenant add(x, y) add pour utiliser une déclaration de variable pour la somme

// Takes in two arguments and returns the sum
function add(x, y) {
  const sum = x   y // use the variable declartion const
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}

• Accéder à Chrome
• Actualiser la page avec Ctrl R
  • vous pouvez également ouvrir un nouvel onglet et rouvrir la console devtools.

Définissons à nouveau les fonctions dans le journal de la console.

• Copiez et collez l'extrait de code ci-dessus dans la console et appuyez sur Entrée.

Nous devons le redéfinir car nous avons lancé une nouvelle console de développement.

Maintenant dans la console, appelez add(2, 2)

• vous verrez la console revenir 4

Appelez printStatus pour voir si vous pouvez accéder à la somme variable définie dans add(x, y)

printStatus()
> Uncaught ReferenceError: sum is not defined
    at printStatus (:9:3)
    at :1:1

L'erreur indique que la somme n'est pas définie

Cela confirme que lorsqu'une variable est définie avec une déclaration de variable (const, let, var) dans une fonction, la portée de cette variable est uniquement dans la fonction

Lorsqu'une variable est définie sans une déclaration de variable dans une fonction, la portée de cette variable est globale.

J'espère que cela aidera Baba (et tous ceux qui liront ceci.)