Ich schreibe diesen Leitfaden für meinen Vater, der alis4ops.com aufbaut.

• Ich bezeichne mich als „Baba“.
• Er lernt, Webanwendungen zu erstellen, früher ist er Elektroingenieur.
• Ich werde einige Notizen rund um den Artikel hinterlassen, die sich auf ihn beziehen, sodass jeder im Interwebz, der dies liest, diese Zeilen ignorieren kann. Ich hoffe, es macht euch nichts aus!

Kontext

Wir haben die folgenden Funktionen:

• handleStartTouch
• handleMoveTouch

Baba definiert in 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
    }
}

Beachten Sie, dass wir online auf draggedElement zugreifen:

• if (draggedElement) {

hanldeMoveTouch löst beim Aufruf keinen Fehler aus.

Das Platzieren eines Haltepunkts auf if (draggedElement) in Chrome DevTools zeigt, dass draggedElement in dasselbe HTML-Element aufgelöst wird, das von event.target in handleStartTouch bereitgestellt wird

Ausgabe

Warum können wir auf draggedElement in handleMoveTouch zugreifen, obwohl es in handleStartTouch definiert ist?

Genereller ausgedrückt: Warum können wir auf eine Variable zugreifen, die in einer Funktion in einer anderen Funktion in Javascript definiert wurde?

Erläuterung

Sehen Sie sich die handleStartTouch-Funktion an:

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

Konkret die Zeile:

    draggedElement = event.target;

Der Variablenname „draggedElement“ wird nicht mit einem der Schlüsselwörter deklariert

• const
• lassen
• var

Zum Beispiel definieren wir es nicht so:

    const draggedElement = event.target;

Variablendeklaration (auch bekannt als Schlüsselwörter)

Wenn wir in Javascript keine Variablendeklarationen (auch Schlüsselwörter genannt) verwenden, betrachtet Javascript diese Variable als eine globale Variable.

Übung

Betrachten Sie das folgende Beispiel, in dem wir zwei Funktionen definieren:

// 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")
  }
}

DevTools in Chrome öffnen

• navigieren Sie zu „Konsole“
• Kopieren Sie den obigen Code und fügen Sie ihn ein
• Drücken Sie die Eingabetaste
• Es wird undefiniert zurückgegeben, das ist in Ordnung.

In der Konsole rufen Sie add(1,1) auf

• Sie werden sehen, dass die Konsole 2 zurückgibt

add(1,1)
=> 2

Dann rufen Sie printStatus auf

• Sie sehen die Ausgabesumme: 2

Wir können sehen, dass printStatus() auf die in add(x, y) definierte Variablensumme zugreifen kann

Das liegt daran, dass die Variable sum ohne die folgenden Schlüsselwörter deklariert wird:

• Summe = x y

Ändern wir nun add(x, y) add, um eine Variablendeklaration für sum zu verwenden

// 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")
  }
}

• Zu Chrome gehen
• Aktualisieren Sie die Seite mit Strg R
  • Sie können auch einen neuen Tab öffnen und die Devtools-Konsole erneut öffnen.

Lassen Sie uns die Funktionen im Konsolenprotokoll noch einmal definieren.

• Kopieren Sie das Code-Snippet oben, fügen Sie es in die Konsole ein und drücken Sie die Eingabetaste.

Wir müssen es neu definieren, da wir eine neue Entwicklungskonsole gestartet haben.

Jetzt in der Konsole add(2, 2) aufrufen

• Sie werden sehen, dass die Konsole 4 zurückgibt

Rufen Sie printStatus auf, um zu sehen, ob auf die in add(x, y) definierte Variablensumme zugegriffen werden kann

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

Der Fehler besagt, dass die Summe nicht definiert ist

Dies bestätigt, dass, wenn eine Variable mit einer Variablendeklaration (const, let, var) innerhalb einer Funktion definiert wird, der Gültigkeitsbereich dieser Variablen nur innerhalb der Funktion liegt

Wenn eine Variable definiert wird ohne eine Variablendeklaration innerhalb einer Funktion, ist der Gültigkeitsbereich dieser Variablen global.

Ich hoffe, das hilft Baba (und allen anderen, die dies lesen.)