Хотите более глубокое понимание «области действия» и «контекста» в JS? Хотите демистифицировать это? Не смотрите дальше. Я вам это упростил!
Возможно, вы много раз слышали, что JavaScript странный 😨 , JavaScript сложен для понимания😨, JavaScript непредсказуем. 🙄 а что нет…
Что ж, это не так уж и странно, если вы понимаете JS наизнанку,
Это не так уж сложно, если вы обращаете внимание к деталям,
Это вполне предсказуемо, если вы разбираетесь в деталях реализации.
Я буду чаще писать о JS и постараюсь упростить сложные темы.
Следите за обновлениями, следите за мной в Твиттере.
Давайте начнем
Сначала мы поймем что такое Scope с помощью одной аналогии и нескольких фрагментов кода, а затем поймем что такое Context с некоторыми фрагментами кода .
Давайте продолжим.
Объем
Чтобы понять, что такое область действия в JS, воспользуемся одной аналогией.
Представим, что вы начинающий торговец и торгуете на своем местном рынке (в своем городе), покупаете товары в одной части города и продаете в другой части. города с некоторой наценкой, вы можете забронировать хорошую наценку в конце дня,
Однажды один из ваших элитных клиентов запрашивает товары, которые недоступны на вашей территории 😇 . Вы не хотите потерять этого элитного клиента, говоря ему нет, вы хотите сделать его доступным для него в любом случае .
Чтобы эти товары были доступны вашему элитному покупателю, вы должны выехать за пределы своей территории и посмотреть, доступны ли они на соседней территории, если они недоступны на соседней территории. вы готовы путешествовать дальше (другие территории), чтобы осчастливить своего элитного клиента.
Вот и все, прочтите эту аналогию еще раз,
Территория, на которой (местная территория) вы ведете бизнес, - это не что иное, как Сфера вашего бизнеса. вы продаете свой товар на своей местной территории, который вы купили на этой же территории.
Но в особых случаях вы готовы пойти на чужую территорию / территорию. и ищите товар, который просил ваш покупатель.
Теперь давайте разберемся с JavaScript
В JavaScript мы называем эту территорию областями действия.
Итак, область действия является синонимом для территория в JavaScript.
Как и ваш бизнес, у JavaScript также есть территория, на которой он работает.
В отличие от вас, JavaScript также готов изменить свою территорию, чтобы сделать своих клиентов счастливыми.
Единственная разница между вами и JavaScript заключается в том, что по умолчанию вы ведете свой бизнес на локальной территории, а JavaScript по умолчанию ведет бизнес на глобальной территории.
В JavaScript заказчик может определить территорию / область, в которой он запрашивает JavaScript для ведения бизнеса. но поскольку JavaScript по умолчанию ведет бизнес на глобальной территории, он всегда будет искать товары на своей глобальной территории, если на территории, определенной клиентом, их нет.
В JavaScript в основном есть три области
1.Глобальная область действия
Как указывалось ранее, это область действия по умолчанию в JavaScript. Это означает, что если переменная не определена внутри какой-либо другой области видимости, она принадлежит глобальной области действия.
Хотя есть одна загвоздка, которую мы пока избегаем.
Как вы можете видеть в приведенном выше фрагменте кода,
я определил переменную name внутри и вне функции someFunction и переменная anotherName вне функции.
Все, что определено внутри функции с именем someFunction, является локальным по отношению к функции, мы не можем получить к нему доступ за пределами someFunction. , а все, что находится за пределами someFunction, относится к глобальной области.
Как указано в приведенной выше аналогии, если товар недоступен в локальной области, JS всегда будет пытаться найти его в глобальной области.
Внутри someFunction, мы печатаем anotherName, JS сначала проверяет, доступен ли он в someFunction, которая является непосредственной локальной областью внутри функции; если она недоступна, она перейдет за пределы этой области и выполнит поиск anotherName, если он там недоступен, он снова выйдет за пределы этой области и будет продолжаться до тех пор, пока не достигнет области по умолчанию, которая является глобальной областью.
В нашем примере у нас только две области: одна - someFunction, а другая - глобальная,
2. Область действия / локальная область действия
Как объяснялось в приведенном выше примере, переменная, определенная внутри someFunction, доступна только внутри этой функции, что означает область переменной становится функцией, в которой она определена.
Как видно из приведенного выше примера, переменные
, определенные внутри функций, также доступны для вложенных функций.
Вспомните нашу аналогию:
При ведении бизнеса в рамках nestedFunction элитный клиент запрашивает у вас какой-то товар, которого нет на вашей территории, сначала вы изучите район, если он доступен, если нет, то только вы поедете дальше.
В приведенном выше примере внутри nestedFunction мы пытаемся напечатать имя, которое не определено внутри nestedFunction, JS выскакивает за пределы области видимости и приземляется в области someFunction, там он находит name и возвращается на свою территорию, которая nestedFunction.
3. Область действия блока
Область действия блока очень похожа на область действия функции, единственное отличие заключается в синтаксисе.
В JavaScript мы можем создать область блока, используя фигурные скобки «{».
Область видимости в JavaScript - это не что иное, как территория, на которой видны переменные.
Примечание. Область видимости переменной может меняться в зависимости от того, как она определена.
например, переменные, определенные с помощью ключевого слова let, имеют блочную область видимости, а переменные определяются с помощью Ключевое слово var - это функции с заданной областью действия. Есть еще правила, но мы проигнорируем их простоту.
Контекст
Когда мы узнали, что такое Scope выше, теперь мы можем утверждать, что всякий раз, когда и где бы ни была определена переменная, она принадлежит некоторой области, это может быть глобальная область действия, область функции, или блокировать область.
Точно так же функции тоже где-то принадлежат. Мы можем вызывать функцию из любого места, конечно, она должна быть видимой в этой области видимости.
Контекст - это место, в котором выполняется функция. Ключевое слово this внутри функции всегда указывает на контекст, в котором оно выполняется или где оно принадлежит.
В JavaScript (веб-браузер) Window - это глобальный объект, в котором выполняются все функции, если они не определены или не предоставлены в каком-либо другом контексте.
Как видно из приведенных выше примеров, someFunction выполняется в глобальном объекте Window, поэтому его контекст становится окном, а функция fn определяется внутри объекта user, следовательно, его контекст - user.
Контекст также называется контекстом выполнения, мы можем изменить контекст функции с помощью методов call, apply и bind.
Кроме того, есть некоторые правила, которые определяют контекст функции, но мы не рассматриваем их здесь.
Как вы можете видеть в приведенном выше примере, функция-конструктор создает отдельный контекст выполнения, но если вызывается как обычная функция, она выполняется в глобальном контексте Window.
Примечание. Контекст выполнения по умолчанию в Worker - WorkerGlobalScope, тогда как в Node.JS есть объект global, в котором выполняются функции.
Таким образом, простыми словами, контекст - это объект, которому принадлежит функция, а ключевое слово this всегда относится к контексту, которому принадлежит функция.
Это все, что касается объема и контекста. Надеюсь, вы узнали что-то новое сегодня.
Подробнее читайте в статьях ниже.
Раньше я тоже писал
Если вам понравилась эта статья, пожалуйста, поставьте лайк и поделитесь
Она побуждает меня писать больше
Если у вас есть отзывы или предложения, напишите мне в Twitter.
