Bhuvan Malik
Это часть 2 для моей предыдущей статьи о подъеме под названием « Руководство по переменным подъемам JavaScript? С пусть и const “ . Так что убедитесь, что вы прочитаете, что перед погружением в этот.
Ранее я говорил о переменных подъездах только потому, что функциональный подъемник в JavaScript не совпадает с переменным подъемом, он уникален по-своему. Я расширю к функциональному подъему в этом наряду с некоторыми распространенными и сложными вопросами собеседования по подъему (переменную и функционируемую), которую кто-либо дает интервью JavaScript, почти наверняка встречается.
Надеюсь, после завершения этих 2 частей вы будете готовы перейти под контроль подготовки JavaScript!
Давайте доберемся до этого.
Функциональный подъемник
Есть 2 способа создания функций в JavaScript, через Декларация функции и через Функция выражение Отказ Посмотрим, что это и как поднимает их.
Декларация функции
Декларация функции Определяет функцию с указанными параметрами. Синтаксис:
function name(param1, param2, ...) { [statements]}В JavaScript функциональные объявления поддерживают определения функций.
Поэтому эти функции могут быть Используется прежде чем они будут объявлены. Пример:
hoisted() // output: "Hoisted"
function hoisted() { console.log('Hoisted')}За кулисами, вот как переводчик JavaScript смотрит на вышеуказанный код:
// Hoisted codefunction hoisted() { console.log('Hoisted')}// Rest of the codehoisted() // output: "Hoisted"
Это поведение верно, если у вас есть декларации функций в глобальном объеме или функциональном объеме (в основном локальном объеме в JavaScript).
Это может быть полезно, потому что вы можете использовать логику более высокого уровня в начале кода, что делает его более читаемым и понятным.
Примечание: Никогда не используйте функциональные декларации внутри, если/else Blocks.
Функция выражения
Функция Ключевое слово также может быть использовано для определения функции внутри выражения. Синтаксис:
const myFunction = function [name](param1, param2, ...) { [statements]} [Имя] Необязательно, поэтому они могут быть анонимными функциями. Мы можем использовать функции стрелки, как и так:
const myFunction = (param1, param2, ...) => { [statements]}Выражения функций в JavaScript не поднимаются.
Следовательно, вы не можете использовать функциональные выражения, прежде чем определять их. Пример:
notHoisted() // TypeError: notHoisted is not a function
const notHoisted = function() { console.log('foo')}Это все, что нужно учитывать для создания функций с точки зрения подъемной точки зрения. Теперь на некоторые вопросы интервью!
Подъемные вопросы интервью
Поднятие и неустойчивое поведение – горячая тема во время интервью. Используя знания из моего Предыдущая статья И этот, можно отправиться в какие-либо вопросы по теме. С этим сказанным, давайте посмотрим на некоторые распространенные вопросы.
Вопрос 1
var a = 1;
function b() { a = 10; return; function a() {}}b();
console.log(a);
Вывод: 1, Что за?! ?
Это потому, что Функция A () {} Заявление создало местное А это имеет функциональный/локальный объем. Это новое А Теперь самается на вершине своей обложенной функции B () С его декларацией и определением. Это то, что происходит за кулисами:
var a = 1;
function b() { // Hoisted function a() {}a = 10; return;}
b();
console.log(a)
Поэтому утверждение ; больше не меняет ценность глобального А что остается 1, а скорее меняется местный А от функции до целочисленного значения 10. Так как мы регистрируем глобальные А вывод 1.
Было утверждение Функция A () {} Не было там, вывод был бы 10.
вопрос 2
function foo(){ function bar() { return 3; } return bar(); function bar() { return 8; }}alert(foo());Выход: 8.
Оба Бар () Функции являются функциональными объявлениями и поэтому будут подниматься на вершину foo () локальный объем. Тем не менее, Бар () Возвращение 8 будет подниматься после возвращения 3. Следовательно, один возврат 8 будет выполнен.
За кулисами:
function foo(){ //Hoisted before function bar() { return 3; } // Hoisted after function bar() { return 8; }return bar(); }alert(foo());
Вопрос 3
function parent() { var hoisted = "I'm a variable"; function hoisted() { return "I'm a function"; } return hoisted(); }console.log(parent());Выход: «Типерррез: поднимается не функция “
Это сложно. Его функция vs. Переменная! Давайте сломаемся.
Мы знаем, что когда дело доходит до переменных подъемных, только декларация (со значением «undefined») поднимается, а не определение!
В случае деклараций функций, определения также поднимаются!
Теперь, в таком случае нескольких деклараций (переменная и функция в одной и той же области) с тем же идентификатором, подъемные переменные просто Игнорируется Отказ Переводчик наступает в объявлении функции и поднимает его. Наконец, выступление переменного назначения (которое не было подзадачено), и «я переменная» назначается для подниматься , что это простое строковое значение, а не функция. Отсюда ошибка!
Вот позади сцен для этой проблемы:
function parent() { // Function declaration hoisted with the definition function hoisted() { return "I'm a function"; }// Declaration ignored, assignment of a string hoisted = "I'm a variable";
return hoisted();
}console.log(parent());
Вопрос 4
alert(foo());function foo() { var bar = function() { return 3; }; return bar(); var bar = function() { return 8; };}Выход: 3.
Это легко. Функция foo () Сама будет лаптана в глобальном объеме как его объявление функции. Что касается внутри foo () , это четкий случай функционирования выражения для обоих Бар () Функции.
Второй Бар () не будет читать переводчиком заранее (без подъема). Первый будет выполнен и возвращен.
Вопрос 5.
var myVar = 'foo';
(function() { console.log('Original value was: ' + myVar); var myVar = 'bar'; console.log('New value is: ' + myVar);})();Выход: «Оригинальное значение было: undefined», «Новое значение: Бар»
В этом, опять же глобальная ценность Myvar («Фу») отсутствует из картины. Это потому, что переменная Myvar Объявляется и определяется внутри локальной области функции и поэтому поднимается на вершину IIFE со значением «undefined», который вошел в систему первым. Затем значение «BAR» затем назначается и регистрируется впоследствии.
Это завершает подъем JavaScript с моей стороны. ?
Надеюсь оба Статьи помогут вам.
Пожалуйста, проверьте статью ниже, если вы хотите узнать функции стрелки и другие функции ES6, связанные с функциями.
JavaScript ES6 Функции: Хорошие части ES6 предлагает несколько прохладных новых функций, которые делают программирование в JavaScript гораздо более гибким. Давайте поговорим о … medium.freecodecamp.org
Мир ✌️.
Оригинал: “https://www.freecodecamp.org/news/function-hoisting-hoisting-interview-questions-b6f91dbc2be8/”