為正在建造 alis4ops.com 的父親撰寫本指南。

• 我稱之為「巴巴」。
• 他正在學習建立 Web 應用程序，以前是一名電氣工程師。
• 將在提到他的文章周圍留下一些註釋，因此 interwebz 上閱讀本文的任何人都可以忽略這些行。希望大家不要介意！

情境

我們有以下功能：

• handleStartTouch
• handleMoveTouch

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) 上放置斷點將顯示dragedElement解析為handleStartTouch中的event.target提供的相同html元素

問題

為何在handleStartTouch定義了draggedElement，卻可以在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;

它不使用任一關鍵字宣告變數名稱dragedElement

• 常數
• 讓
• 變數

例如，我們不是這樣定義它的：

    const draggedElement = event.target;

變數聲明（又稱關鍵字）

在Javascript中，當我們不使用變數宣告（也稱為關鍵字）時，javascript認為該變數是全域變數.

鍛鍊

考慮以下範例，其中我們定義了兩個函數：

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

• 導覽至「控制台」
• 複製並貼上上面的程式碼
• 按回車鍵
• 它將返回未定義，沒關係。

在控制台中呼叫add(1,1)

• 你會看到控制台回傳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 重新整理頁面
  • 您也可以開啟一個新分頁並再次開啟 devtools 控制台。

我們再定義一下控制台日誌中的函數。

• 將上面的程式碼片段複製並貼上到控制台中，然後按 Enter。

我們需要重新定義它，因為我們啟動了一個新的開發控制台。

現在在控制台中，呼叫 add(2, 2)

• 你會看到控制台返回4

呼叫printStatus查看是否可以存取add(x, y)中定義的變數sum

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

錯誤提示 sum 未定義

這證實了當函數內使用變數宣告（const、let、var）定義變數時，該變數的作用域僅在函數內

當定義變數時而沒有函數內的變數聲明，該變數的作用域是全域的。

希望這對巴巴（以及其他讀到這篇文章的人有幫助。）