Обзор подъема в Javascript

Первоначально опубликовано 24 декабря 2019 г.

Поднятие — когда вы вызываете функцию или переменную в строке над строкой, где она определена.

Декларация Var поднимается, но не присваивается

function sayVar() {
  console.log('My name is', theName)
  var theName = 'Jane Doe'
}

Это возвращает при вызове «Мое имя не определено».

Объявление theName сохраняется в памяти, когда движок Javascript выполняет свой первый проход по коду; но еще не присваивает ему значение. Когда движок Javascript выполняет второй запуск и достигает строки, где мы вызываем console.log('My name is', theName); theName объявляется, но не назначается; поэтому он просто оценивается как «неопределенный». Это не вызывает ошибки и поэтому может остаться незамеченным.

Let и Const не поднимают

function sayConst() {
  console.log('My name is', theName)
  const theName = 'Jane Doe'
}
function sayLet() {
  console.log('My name is', theName)
  let theName = 'Jane Doe'
}

Обе следующие функции при вызове возвращают ReferenceError: имя не определено.

Поскольку они выдают ошибку, еще не определенная природа theName становится более очевидной, чем если бы мы объявили переменную с помощью var.

Объявления функций DO подъемник

function sayFunction() {
  console.log('My name is', theName())
  function theName() {
    const name = 'Jane Doe'
    return name
	}
}

Это возвращает, когда вызывается: «Меня зовут Джейн Доу». — показывая, что когда мы объявляем память с помощью ключевого слова function, движок Javascript сохраняет ссылку на память даже при первом «компиляции» кода.

Обычный шаблон проектирования, который я видел в коде, заключается в том, чтобы определить основную функцию программы в верхней части файла или вызвать функции, составляющие основную программу, в верхней части, а затем определить эти функции-компоненты ниже; ПОСЛЕ их вызова. Причина, по которой это может работать, заключается в том, что они объявлены с ключевым словом function.

Пример этого шаблона проектирования

const mainProgram = function() {
  function1();
	function2();
}
function function1() {
  console.log(1)
}
function function2() {
  console.log(2)
}
// 1
// 2

Анонимные функции, назначенные переменным с Let или Const, НЕ поднимаются

function sayConstAnonFunction() {
  console.log('My name is', theName)
  const theName = function() {
    theName = 'Jane Doe'
  }
}

Это возвращает при вызове ReferenceError: имя не определено.

Функции, объявленные с помощью ключевого слова function, и функции, объявленные с помощью ключевого слова const, ведут себя одинаково, за исключением того, что функции, объявленные с помощью ключевого слова const, не поднимаются. Я подумал, что это очень интересно — тот же шаблон проектирования, что и выше, не работает, если его функции объявлены с ключевым словом const.

На самом деле шаблон проектирования работает при определенных обстоятельствах — причина, по которой я был заинтересован в тестировании этих различных случаев, заключается в разговоре, который у меня был с Нэнси во время обзора моего проекта.

Шаблон проектирования будет работать, если основная программа, которая вызывает функции компонента, вызывается только в зависимости от срабатывания прослушивателя событий — простой пример — «щелчок». К тому времени, когда вы взаимодействуете с элементом в DOM, Javascript наверняка объявил и присвоил значения этим константным переменным, верно? Это также работает, если вы прослушиваете событие DOMContentLoaded. За те доли секунды, которые требуются для загрузки DOM, Javascript подготовил в своей памяти те функции, которые вы объявили с помощью const.

document.addEventListener('DOMContentLoaded', () => {
  function1();
  function2();
});
const function1 = function() {
  console.log(1);
};
const function2 = function() {
  console.log(2);
};

Какой вывод здесь? Лично я сейчас склоняюсь к назначению функций с помощью ключевого слова const — я думаю, что может быть немного сложнее убедиться, что порядок загрузки правильный, но оно того стоит. Не говоря уже о том, что поскольку const имеет блочную область видимости, сущности не используют функции, не предназначенные для решения их собственных задач.