JS 變數宣告簡介

為正在建造 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（拖曳元素）{

hanldeMoveTouch 呼叫時不會引發錯誤。

在 Chrome DevTools 中的 if (draggedElement) 上放置斷點將顯示，draggedElement 解析為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;

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

• 常數
• 讓
• var

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

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

錯誤提示總和未定義

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

當在函數中定義變數時沒有

變數聲明，該變數的作用域是全域的。

希望這對巴巴（以及其他閱讀本文的人）有幫助。

以上是JS 變數宣告簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！