3 продвинутых концепции JavaScript, которые вы должны знать как старший разработчик

Например:

• Допустим, мы определили три переменные: age1,age2&age3, где age2 равно age1. Однако мы также определили age3 так же, как age1.
• В этот момент вы, должно быть, думаете, что все три переменные содержат одинаковые значения возраста. Но это сложная часть, переменная age3 может выглядеть одинаково с одним и тем же определенным возрастом, но то, как JavaScript работает со ссылочными типами, немного сбивает с толку.
• Как вы можете видеть в консоли, когда мы регистрируем age1 === age2, оказывается true, что говорит само за себя, но когда мы регистрируем age2 === age3 показывает нам false.

Для лучшего понимания давайте глубже посмотрим, что происходит под капотом.

• Когда мы определили переменную age1, JavaScript создал новый объект и сохранил в нем значение, а также когда мы определили age2 === age1 JavaScript ссылкиage1 что означает, что наша переменная age2 будет содержать все, что находится внутри переменной age1.
• Однако когда age3 определен, он сохраняется в другом месте, и JavaScript помещает любое значение, которое мы определили для него.

• На данный момент Box1 и Box3 содержат разные объекты, поэтому мы получили false в консоли для age2 === age3.

Контекст

Обратите внимание, что разработчики обычно путают понятия Scope и Context. Scope — это то, что вы можете назвать границами функции, выше этих границ, JavaScript ничего не распознает.

Однако Контекст – это совершенно другое понятие. Проще говоря, Контекст – это среда, в которой выполняется функция и когда мы работаем с функциями в JavaScript. они выполняются в этой среде. Если вы работаете с JavaScript в течение приличного времени, вы наверняка слышали о ключевых словах this, которые сбивают с толку многих разработчиков.

Примечание. Этовсегда указывает на текущий Контекст, в котором выполняется ваша функция. В браузерах у нас есть объект window, в котором выполняются все наши функции, если вы не определили функцию в другом контексте.

Например:

• В приведенном выше примере, когда мы console.log это, в выходных данных возвращается объект Window.
• Проще говоря, Context сообщает нам, внутри какого объекта мы находимся. Чтобы еще раз проверить это, вы можете запустить console.log(this === window), и результат будет true, так как оба объекта одинаковы.

Однако, чтобы создать новый Context или новое значение для this, вам придется действовать другим путем. Из приведенного ниже примера вы лучше поймете, как this и Context работают в JavaScript.

Например:

• Вы можете видеть, как мы можем получить доступ к свойству name из-за контекста profile. Однако это невозможно в глобальном контексте из-за собственных ограничений.
• Эта концепция контекста становится очень полезной, когда вы работаете с командой разработчиков, так как вы, скорее всего, увидите это, а также вам нужно будет понять контекст, чтобы выполнить создание экземпляра.

Создание экземпляра

Если вы работаете с React в течение длительного времени, вы, должно быть, видели такой шаблон. Создание экземпляров очень удобно, когда вы работаете с несколькими классами, когда хотите получить доступ к определенной функции или функции из этого класса без дублирования вашей кодовой базы.

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

Давайте подробнее рассмотрим пример того, как инстанцирование работает в JavaScript.

Например:

• Допустим, мы создаем приложение электронной коммерции, в котором у нас есть два класса Пользователь и Профиль, оба этих класса содержат разные функции как introduction() и ready().

• Если мы хотим получить доступ к обеим этим функциям для другого пользователя, мы можем легко сделать это, выбрав наш класс User и создав нового пользователя за несколько секунд.

• Используя этот метод, мы можем легко получить доступ к обеим функциям из наших классов.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.