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中文网其他相关文章！