JS 変数宣言の概要

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

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

コンテクスト

次の機能があります:

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

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 (draggedElement) {

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

Chrome DevTools で if (draggedElement) にブレークポイントを設定すると、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を宣言していません

• 定数
• させて
• var

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

    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 (<anonymous>:9:3)
    at <anonymous>:1:1

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

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

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

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

以上がJS 変数宣言の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。