Это руководство пишет отец, создающий alis4ops.com.

• Меня зовут «Баба».
• Он учится создавать веб-приложения, в прошлом инженер-электрик.
• Оставлю несколько заметок вокруг статьи, относящейся к нему, чтобы любой пользователь Интернета, читающий это, мог игнорировать эти строки. Надеюсь, вы, ребята, не против!

Контекст

У нас есть следующие функции:

• handleStartTouch
• дескрипторMoveTouch

Баба определена в DragDrop.js

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
    }
}

Обратите внимание, что мы получаем доступ к перетаскиваемому элементу в режиме онлайн:

• if (draggedElement) {

hanldeMoveTouch не выдает ошибку при вызове.

Размещение точки останова на if (draggedElement) в Chrome DevTools покажет, что draggedElement разрешается в тот же элемент html, который предоставлен event.target в handleStartTouch

Проблема

Почему мы можем получить доступ к перетаскиваемому элементу в handleMoveTouch, даже если он определен в handleStartTouch

В более общем смысле, почему мы можем получить доступ к переменной, которая была определена в функции, в другой функции в 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")
  }
}

Откройте DevTools в Chrome

• перейдите в «Консоль»
• Скопируйте и вставьте приведенный выше код
• Нажмите Enter
• Он вернет неопределенное значение, это нормально.

В консоли вызовите add(1,1)

• вы увидите консольный возврат 2

add(1,1)
=> 2

Затем вызовите printStatus

• Вы увидите выходную сумму: 2

Мы видим, что printStatus() может получить доступ к переменной sum, определенной в add(x, y)

Это связано с тем, что переменная 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.
  • вы также можете открыть новую вкладку и снова открыть консоль инструментов разработчика.

Давайте еще раз определим функции в журнале консоли.

• Скопируйте и вставьте приведенный выше фрагмент кода в консоль и нажмите Enter.

Нам нужно переопределить его, потому что мы запускаем новую консоль разработчика.

Теперь в консоли вызовите add(2, 2)

• вы увидите консольный возврат 4

Вызовите printStatus, чтобы узнать, есть ли доступ к переменной sum, определенной в add(x, y)

printStatus()
> Uncaught ReferenceError: sum is not defined
    at printStatus (:9:3)
    at :1:1

Ошибка: сумма не определена

Это подтверждает, что когда переменная определена с объявлением переменной (const, let, var) внутри функции, область действия этой переменной находится только внутри функции

Когда переменная определена без объявления переменной внутри функции, область действия этой переменной является глобальной.

Надеюсь, это поможет Бабе (и всем, кто это читает.)