Это история двух друзей (Джейн и Курт), которые общаются друг с другом, чтобы лучше понять ошибки Javascript.
Джейн: Привет, Курт, как дела?
Курт:Привет, Джейн, у меня все хорошо. Недавно мой проект закончился, и я должен сказать, что это отличное обучение. Кстати, как ваша работа проходит в эти дни?
Джейн:Да, все идет хорошо, хотя и не очень. Я борюсь с Javascript и его концепциями. Я чувствую себя совершенно сбитым с толку, когда мне приходится отлаживать Js. 🤯🤯
Курт:Эй, мне очень нравится Javascript❤️, я узнал о нем так много хорошего в своем последнем проекте. Вы знаете, что самое лучшее в Javascript — это то, что как только вы поймете концепцию Js, вы будете поражены и влюбитесь в нее.
Джейн: Похоже, вы любите Javascript. Я никогда не чувствовал себя так, особенно для Javascript. Javascript очень сбивает меня с толку. Вы поможете мне понять несколько концепций?
Курт:Все для Javascript💕. Скажите, что для вас самое запутанное? Сначала мы начнем оттуда.
Джейн: Отлично, тогда давайте поговорим об ошибках Javascript, почему в Javascript существуют разные типы ошибок, например ReferenceError, TypeError и т. д.
Курт: Это просто, если вы просто погуглите, вы получите много ответов в переполнении стека. Но подождите, если вы прочитаете эти ответы, вы просто будете знать, когда получить какие ошибки, но вы не поймете, как движок Js внутри делает это за кулисами. Позвольте мне попытаться объяснить, как красиво движок JS обрабатывает ошибку внутри. Чтобы понять ошибки Js, давайте сначала поговорим о поиске Js.
Когда движок JS выполняет скомпилированный код, он должен искать каждую переменную, чтобы проверить, объявлена используемая вами переменная или нет. Этот поиск происходит для консультации с областью видимости JS. например.,
var a = 100;
function foo() {
let b = 10;
return a+b;
}
В приведенном выше примере, когда движок начинает выполнять return a+b, он ищет переменные a и b консультирование области действия, т. е. проверка того, объявлены ли a и b или нет, что в нашем случае b присутствует в локальной области видимости и a — глобальная область действия.
Джейн: Да, насколько я понимаю, поиск переменной в основном проверяет, объявлена ли переменная или нет.
Курт:Хорошо, если вы знаете, но знаете ли вы, что Js выполняет 2 разных типа поиска. Тип поиска, который выполняет механизм, влияет на результат поиска.
Джейн: Это что-то новое, так что расскажите мне немного больше о типах поиска
Курт:Конечно, движок Js выполняет левую и правую стороны, я думаю, что полная форма больше похожа на то, что мы знаем, что это левая и правая стороны. -ручной поиск.
Поиск слева происходит когда переменная появляется слева от операции присваивания, а поиск справа появляется справа (или не слева) от оператора присваивания, это то, что мы поняли. когда мы слышим LHS и RHS.
Итак, LHS, вы правильно поняли, но чтобы не путать вас с RHS, вы также можете понимать RHS как получить значение переменной (без присваивания).
1. var a = 100;
2. function foo() {
3. let b = 10;
4. return a + b;
5. }
В приведенном выше примере строки 1 и 3 выполняют поиск LHS, поскольку нам не важно, какое текущее значение a и b, вместо этого мы присваиваем значение напрямую. И согласно определению, переменные a и b отображаются слева от оператора присваивания. Строка 4 относится к текущим значениям a и b, поэтому она выполняет поиск RHS, поскольку запрашивает получение значения a и б.
Джейн:Ясно, это было легко понять, я поняла разницу между левой и правой сторонами.
Курт:Хорошо, не могли бы вы сказать мне, сколько операций поиска слева и справа происходит в приведенном ниже примере:
1. function foo(b) {
2. console.log(b);
3. }
4. foo(4);
Джейн: Я знаю Курта, происходит только 1 запрос RHS, вот и все.
Курт: Вы не совсем правы, да, есть один запрос RHS, но здесь вы упускаете несколько моментов:
- строка 4 передает 4 переменной b (неявное присвоение параметра), что также является присвоением переменной b, которая считается равной 1 LHS.
- строка 4 говорит, что нужно получить значение foo, следовательно, 1 RHS за получение значения foo.
- строка 2 говорит, что нужно получить значение для console.log, следовательно, 1 RHS для получения значения метода журнала внутри объекта консоли.
Всего 2 левых и 2 правых поиска.
Таким образом, диалог между Engine и Scope происходит примерно так:
Engine: Привет, Scope, у меня есть ссылка RHS на foo, ты знаешь foo?
Область действия: Да, компилятор объявил это как функцию, вы можете его использовать.
Движок: Круто, тогда я запускаю foo
Движок: Scope, я нашел в LHS переменную a. Вы понимаете эту переменную?
Область действия: да, это формальный параметр для foo, вот и все.
Движок: Круто, спасибо. Вы тоже знаете о консоли? Я получил ссылку RHS для консоли.
Область действия: Эй, да, это встроенный объект, что вы хотите от него?
Движок: я искал метод журнала внутри консоли, он там?
Область действия: да, вы можете использовать его.
Движок: Извините, но я снова получил ссылку RHS для a, просто хочу подтвердить, тот же самый формальный параметр для foo или он изменен?
Область действия: движок без проблем, вы можете его использовать. Без изменений.
Движок: спасибо компании Scope за ее решение.
Джейн: Ого!! Это была долгая дискуссия между движком и областью видимости для такого небольшого фрагмента кода. И я не думал, что для функций и console.log также будет производиться поиск, что меня удивило.
Курт:Да, именно поэтому я говорю, что Js творит для нас волшебство внутри.Только представьте для нашей длинной кодовой базы, как долго будет выглядеть обсуждение области действия и движка 🤯, что было так хорошо обрабатывается Js 🙏.
Я также был поражен, когда впервые прочитал о том, как поиск происходит внутри 😇.
Джейн: Это все хорошо для теоретических знаний, Курт, но мы начали обсуждать ошибки JS, почему ты рассказываешь мне теорию, скажи мне что-нибудь, что поможет нам понять ошибки.
Курт: Да, потерпи, я иду туда 😁. Итак, у нас есть 3 типа ошибок Javascript:
- Синтаксические ошибки
- Справочные ошибки
- Ошибки типа
Я считаю, что синтаксические ошибки очень понятны большинству из нас. Итак, давайте обсудим два других. Время раскрыть концепцию 🤩🤩
Ошибка ссылки:
Когда механизм JS выполняет поиск RHS, и область действия сообщает механизму, что переменная не объявлена, что приводит к сбою разрешения области действия, это приводит к ошибке ссылки.
Сбой разрешения области при поиске RHS = ошибка ссылки
В приведенном ниже примере
function foo(){
return a;
}
У нас есть поиск RHS для переменной a, движок свяжется с областью видимости, чтобы проверить, объявлена ли переменная или нет, так как это поиск RHS, область отвечает, что нет переменной для имени a, что приводит к сбою разрешения области действия, т. е. ошибке ссылки.
Примечание. В случае поиска LHS, если механизм обнаружил, что переменная не объявлена, дружественная область действия создаст одну переменную для механизма и не приведет к ошибке ссылки, но только в том случае, если вы этого не сделаете. Не используйте в коде «строгий режим», добавленный в ES5. Если добавлен «Строгий режим», поиск в левой части также приведет к ошибке ссылки, аналогичной сбою разрешения области в правой части.
Например: в приведенном ниже примере b нигде в коде не объявлено, но тем не менее вы не получите никакой ссылки на ошибку, потому что область действия создает переменную b, даже если вы пропустил объявление.
function foo(){
b = 15;
console.log(b);
}
foo();
Output: 15
Но если вы используете strict, вы получите ошибки ссылок.
use "strict"
function foo(){
b = 15;
console.log(b);
}
foo();
Output: Reference Error
Ошибка типа:
Когда Js Engine выполняет поиск RHS, и область дает положительный ответ на поиск, после чего вы пытаетесь выполнить какую-либо недопустимую операцию с искомым значением, это приводит к ошибке типа.
Когда есть успешный поиск RHS, но невозможное действие выполняется над результатом поиска, значение = ошибка типа
В приведенном ниже примере
var c = "Hello Js"
function foo() {
return c.someFunc();
}
foo();
Output: TypeError
Итак, здесь поиск RHS для переменной c прошел успешно, и область положительно отреагировала на движок, упомянув, что c является переменной. Теперь, исходя из этого результата, мы пытаемся выполнить вызов функции для переменной, которая недействительна и, следовательно, приводит к TypeError.
Джейн:😳😳 Я много где искала, но так и не поняла, что это происходит за кулисами. Теперь я понял, почему вы объяснили поиск Js до того, как объяснили ошибки. Это действительно помогает 🙏🙏. Я четко понял, в чем разница между ошибками и всеми поисковыми играми.
Курт: 😎😎. Совершенно никаких проблем. Дайте мне знать, если вы хотите узнать что-то еще, мы всегда можем делать небольшие наверстывания, как это 🙂.
Я собрал все точки и написал этот блог, чтобы повторять концепции всякий раз, когда я хочу их вспомнить. Я буду рад, если это поможет вам, и если вы хотите больше блогов на темы JS, я постараюсь добавить больше. Отзывы всегда приветствуются 🙂🙂
