1). Почему понимание контекста является важной частью освоения JavaScript

Изучая JavaScript, вы можете заметить, что сохранение динамики и возможности повторного использования — важная часть создания «хорошего» кода.
JavaScript предоставляет нам множество обычных инструментов, которые помогают нам достичь этого динамичного потока. От переменных до функций и всего, что между ними, любой шанс избежать жесткого кодирования тем лучше. Особенно в случае объектов, классов и функций.

  • «Это» относится к текущему контексту (или владельцу) исполняемого кода».

Мы можем использовать ключевое слово «это», чтобы дать нам динамический контекст. Позволяет нам использовать this для ссылки на экземпляр объекта класса после его создания или даже на объект окна (если вы действительно этого хотите...).
Преимущество в том, что если у нас есть класс собак и несколько новых экземпляров этих собак (Чарли, Ровер, Пал), мы можем определить «это» в классе: Собака и после создания экземпляра, если мы получим доступ к «этому», это будет относиться к реальной собаке (скажем: Ровер).

** Три основных правила, которые необходимо понять: **

  • Правило: 1) «this» в коде функции, вызываемой с помощью оператора new, относится к новому экземпляру этого объекта.

  • Правило: 2) При выполнении функции как метода объекта «это» относится к этому объекту.

  • Правило: 3) По умолчанию это относится к глобальному объекту

2). При каких обстоятельствах меняется ваш контекст

При использовании this будьте осторожны, чтобы понять разницу между функциями ES5 и ES6.
~ Стандартная функция ES5 ( function () {} ): когда функция ES5 выполняется, контекст «this» определяется . Это с меньшей вероятностью даст вам неожиданные результаты.
VS
~ Стрелочная функция ES6 ( () => {} ): когда создается функция ES6, определяется контекст «this». В большинстве случаев ведущий контекст к Window Object.

3). Разница между контекстом и областью действия

Являетесь ли вы новым разработчиком или были в игре целую вечность. Разница между «Контекстом» и «Областью» может быть немного размытой. Но есть разница!

  • Контекст: связан с функциями в том смысле, что он основан на объектах. Разрешить использовать this для ссылки на экземпляр объекта.
  • Область действия: связана с функциями в том смысле, что она основана на функциях. Предоставление функциям доступа к переменным на основе их «Scope-Chain» (которую я предлагаю прочитать по этой теме подробнее). Не полагаясь на ключевое слово «это».

4). Где «связывание» пригодится при решении проблем контекста?

  • Функция.prototype.bind()

!! ТРЕВОГА !! Не рекомендуется прибегать к этому методу

Этот дополнительный фрагмент кода можно добавить в конце функции ES6. Предоставление ему оболочки и создание новой связанной функции (BF). Вы даже можете передать Bound Arguments, где данные элементы упоминаются как первые аргументы при вызове this.

Спасибо за чтение :)

Автор: Джастин Пиктел (также известный как SiimonStark)
~ Frontend Engineer: JavaScript, React, SCSS, TDD
Twitter: https://twitter.com/SiimonStark
LinkedIn: https: //www.linkedin.com/in/justinpyktel/
Студент @Turing Software & Design https://turing.io/hire/