為正在建造 alis4ops.com 的父親撰寫本指南。
我們有以下功能：
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：
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
例如，我們不是這樣定義它的：
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)
add(1,1) => 2
然後呼叫 printStatus
我們可以看到 printStatus() 可以存取 add(x, y) 中定義的變數 sum
這是因為變數 sum 是在沒有以下關鍵字的情況下宣告的：
現在讓我們更改 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")
}
}
我們再定義一下控制台日誌中的函數。
我們需要重新定義它，因為我們啟動了一個新的開發控制台。
現在在控制台中，呼叫 add(2, 2)
呼叫 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中文網其他相關文章！
