为正在构建 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中文网其他相关文章！
