为正在构建 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）定义变量时，该变量的作用域仅在函数内

当定义变量时而没有函数内的变量声明，该变量的作用域是全局的。

希望这对巴巴（以及其他读到这篇文章的人有帮助。）