Подъем – это фундаментальная концепция языка JavaScript. Это также одна из тех тем, которые часто спрашивают в интервью.
Хотя концепция очень проста, она в основном неправильно поняла. Давайте понять поднятие с помощью некоторых примеров.
Рассмотрим этот пример:
var source = "tweaked.dev";
console.log(source);
function printMe() {
console.log("from printMe:" + source);
}
printMe();
// Output: // tweaked.dev // from printMe:tweaked.dev
Это довольно прямо прямо сейчас?
Код выполнен строкой по строке.
Давайте посмотрим на то, что происходит:
- Изменяемый источник создан и присваивается значение «Tweaked.dev».
- Заявление Console.log столкнуто, и значение источника напечатано на консоли → Tweaked.dev
- Точно так же следующая строка – определение функции PrintMe. Сопровождаемый фактическим вызовом на функцию PrintMe (). Это приводит к утверждениям внутри выполнения функции и строки «из PrintMe: Tweaked.dev», напечатанную на консоль.
Но это выполнение кода действительно это прямо вперед в JavaScript?
Посмотрите на это изменение того же примера.
console.log(source);
printMe();
function printMe() {
// function definition
console.log("from printMe:" + source);
}
var source = "tweaked.dev"; // variable declaration and value assignment
printMe();
Здесь мы регистрируем переменную источник в консоль еще до того, как он будет объявлен.
Также мы называем функцию PrintMe, прежде чем она определяется.
Будет ли этот код бросить ошибку?
Как вы думаете, что ожидаемый выход для этого примера?
Найдите минутку, чтобы подумать, прежде чем увидите вывод ниже.
console.log(source);
printMe();
function printMe() {
console.log("from printMe:" + source);
}
var source = "tweaked.dev";
printMe();
// Output: // undefined // from printMe:undefined // from printMe:tweaked.dev
На большинстве языков программирования это бросило бы исключение.
Ну, JavaScript позволяет это. Как? Из-за подъема.
Подъем Является ли функцией в JavaScript, где переменная может использоваться до того, как она будет объявлена. Точно так же функция также можно назвать, прежде чем она определяется.
Чтобы понять, как подъемные работы нам нужно понять контекст выполнения.
Контекст исполнения Окружающая среда, которая подготовлена двигателем JavaScript, чтобы выполнить код, который вы пишете.
Проще говоря, это информация, которая необходима для того, чтобы выполнить код.
Контекст выполнения создан в двух этапах: –
Этап создания
- Код отсканирован/сбрасывается для переменных и функций.
- Пространство зарезервировано для переменных в памяти.
- Определения функций загружаются в память.
Фаза выполнения
- Код выполнен оператор, отчет с информацией из этапа создания.
- Переменные назначаются значения.
- Функции выполняются.
Давайте посмотрим фазы контекста выполнения для примера, показанного ранее:
Он находит переменного источника и загружает его в память. Поскольку код еще не выполнен, его значение не определено.
Функция PrintMe также загружается в память.
Чтобы проверить, хорошо ли вы поняли концепцию контекста подъема и выполнения, давайте рассмотрим еще один пример:
source = 5;
console.log(source);
printMeFnExp();
// function expression syntax
var printMeFnExp = function printMe() {
console.log("from function:" + source);
};
var source;
// Output: // 5 // Uncaught TypeError: printMeFnExp is not a function
Удивлен ошибкой на выходе? Вы не должны быть.
Для лучшего понимания взгляните на диаграммы ниже.
- Переменные Источник и printmefnexp загружены в память.
- Функция PrintMe загружен в память.
Посмотрите еще на printmefnexp – это функциональное выражение. Это указывает на то, что он переменная, чья значение указывает на функцию.
Проще говоря, функция назначается переменной. Чтобы вызвать функцию, которая назначена переменной, нам нужно написать «Функциональное значение», а затем кронштейны.
Пример: printmefnexp ()
- Значение 5 присваивается источнику.
- 5 зарегистрирован в консоли.
- printmefnexp вызывается. Однако это бросает ошибку – неисправный тип DypeError: printmefnexp не является функцией.
Это происходит, потому что переменная была поднята, но исходное значение все еще не определено. Таким образом, мы получаем ошибку для попытки вызвать функцию в неопределенном значении.
Заявление, которое назначает ссылку на функцию PrintMe на printMefnexp, не выполнена.
Чтобы исправить эту ошибку, см. Изменение кода ниже:
source = 5;
console.log(source);
// function expression syntax
var printMeFnExp = function printMe() {
console.log("from function:" + source);
};
printMeFnExp();
var source;
// Output:
// 5
// from function:5
Здесь PrintMefnexp была назначена ссылка на функцию PrintMe. Таким образом, теперь можно вызвать выражение функции, как это – printMefnexp ();
Примечание. Для контекста выполнения больше, чем упоминается в этой статье. Я накрыл достаточно для вас, чтобы понять поднял.
Исключения для подъема
Подъемные работы по-разному, если декларация переменной выполняется с использованием Пусть или Const Отказ
В случае var Значение инициализируется на undefined во время этапа создания. Однако в случае Пусть и Const Значение достигает только во время фазы выполнения.
Смотрите пример ниже:
console.log(source);
printMe();
function printMe() {
console.log("from printMe:" + source);
}
let source = "tweaked.dev";
// Output: // Uncaught ReferenceError: source is not defined
Поскольку значение источника не инициализируется во время фазы создания, источник не имеет ссылки на значение в памяти. Благодаря этой справочной ошибке брошен для стата console.log (источник);
Эта концепция также известна как Временная мертвая зона Отказ Это означает, что переменная не может быть доступна, пока она не будет объявлена.
Давайте посмотрим на тот же пример с этими знаниями.
// Temporal Dead Zone
///////////////////////////////////////////////
console.log(source); ///
printMe(); ///
///
function printMe() { ///
console.log("from printMe:" + source); ///
} ///
///
///////////////////////////////////////////////
let source = "tweaked.dev"; // Temporal Dead Zone Ends
Здесь//линии представляют временную мертвую зону для Источник Переменная. Мы получим ссылочную ошибку, если мы попытаемся получить доступ к источнику в этом блоке.
Ниже приведено правильное использование Пусть :
let source = "tweaked.dev";
console.log(source);
function printMe() {
console.log("from printMe:" + source);
}
printMe();
Во время фазы выполнения, если Нет значения предусмотрено вместе с объявлением, то значение считается неопределенным.
См. Пример:
let source; // declaration
console.log(source);
source = "tweaked.dev"; // initialization
function printMe() {
console.log("from printMe:" + source);
}
printMe();
// Output: // undefined // from printMe:tweaked.dev
Пример с const:
const source; console.log(source);
// Output: // Uncaught SyntaxError: Missing initializer in const declaration
Const указывает на постоянное значение. Это значение не может быть изменено во время выполнения кода. Поэтому имеет смысл, что это требует значения инициализатора во время объявления.
Правильное использование Const:
const source = "tweaked.dev"; console.log(source);
// Output: // tweaked.dev
Заключение
Кодирование лучших практик предлагает объявлять переменные в начале блока кода. Также предпочтительно использовать пусть и const для переменной декларации. Это усиливает читаемость кода.
Хотя использование переменной декларации с использованием VAR устарела, все еще важно знать эту концепцию, поскольку вы все равно сможете встретить этот шаблон в некоторых существующих базах кода или даже интервью. Существует вероятность того, что вам может даже решить такого кода с последними функциями JavaScript.
Знание подъема поможет вам избежать каких-либо ошибок и путаницы, связанной с переменной декларацией и его использованием.
Пожалуйста, не стесняйтесь комментировать или спросите ваши запросы или сомнения.