このガイドは、alis4ops.com を構築している父親によって書かれています。

• 私は「ババ」と呼んでいます。
• 彼は Web アプリケーションの構築を学んでいます。元は電気エンジニアでした。
• 彼について言及した記事の周囲にいくつかのメモを残しておきます。そのため、これを読んでいるインターウェブ上の人はこれらの行を無視してかまいません。気にしないでください!

コンテクスト

次の機能があります:

• ハンドルスタートタッチ
• ハンドルムーブタッチ

DragDrop.js で定義された Baba

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
    }
}

次の行で draggedElement にアクセスしていることに注意してください:

• if (ドラッグ要素) {

hanldeMoveTouch を呼び出したときにエラーが発生しません。

Chrome DevTools で if (draggElement) にブレークポイントを設定すると、draggedElement が handleStartTouch のevent.target によって提供される同じ HTML 要素に解決されることが表示されます

問題

handleStartTouch で定義されているにもかかわらず、handleMoveTouch の draggedElement にアクセスできるのはなぜですか

より一般的に、関数内で定義された変数に JavaScript の別の関数でアクセスできるのはなぜですか?

説明

handleStartTouch 関数を見てください:

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

具体的には次の行:

    draggedElement = event.target;

いずれかのキーワードを使用して変数名draggedElementが宣言されていません

• 定数
• させて
• 変数

たとえば、次のように定義していません:

    const draggedElement = event.target;

変数宣言 (別名キーワード)

JavaScript では、変数宣言 (キーワードとも呼ばれます) を使用しない場合、JavaScript はその変数を グローバル変数.

エクササイズ

2 つの関数を定義する次の例を考えてみましょう:

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

Chrome で DevTools を開きます

• 「コンソール」に移動します
• 上のコードをコピーして貼り付けます
• Enterを押してください
• 未定義が返されますが、問題ありません。

コンソールで、add(1,1)

• コンソールに return 2 が表示されます。

add(1,1)
=> 2

次に printStatus を呼び出します

• 出力 Sum: 2
が表示されます。

printStatus() が add(x, y) で定義された変数 sum にアクセスできることがわかります

これは、変数 sum が次のキーワードなしで宣言されているためです:

• 合計 = x y

ここで、add(x, y) add を変更して、sum
の変数宣言を使用します。

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

• Chrome に移動
• Ctrl R でページを更新します
  • 新しいタブを開いて開発ツール コンソールを再度開くこともできます。

コンソールログの関数を再度定義しましょう。

• 上記のコード スニペットをコピーしてコンソールに貼り付け、Enter キーを押します。

新しい開発コンソールを開始するので、再定義する必要があります。

コンソールで add(2, 2)

• コンソールに 4 が返されることがわかります

printStatus を呼び出して、add(x, y) で定義された変数 sum にアクセスできるかどうかを確認します

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

合計が定義されていないというエラーが表示されます

これは、関数内で変数宣言 (const、let、var) を使用して変数が定義されている場合、その変数のスコープは関数内のみであることを確認します

関数内で変数宣言をせずに変数が定義されている場合、その変数のスコープはグローバルになります。

これがババ (そしてこれを読んでいる他の人) のお役に立てば幸いです。