Серия Основы JavaScript "Области действия, подъем, замыкания"
Если вы рассматриваете JavaScript как игру и планируете стать профессиональным игроком, как я, вам необходимо отлично понимать правила. Чтобы помочь вам в этом, я планирую написать серию статей о, возможно, наиболее важных концепциях JavaScript; Области действия, подъема и закрытия, и эта статья будет посвящена глобальной области действия.
Для простого вхождения в тему давайте определим, что такое область действия и почему она так важна? Области видимости - это способ определить, где доступны переменные. Если вы понимаете области действия, вы можете сделать свои переменные и функции доступными, когда вы хотите, чтобы они были или там, где вы хотите, чтобы они были, что дает вам контроль, который вы должны иметь в JavaScript. Определение может быть не очень четким, надеюсь, эти статьи станут более ясными по мере прохождения. В JavaScript есть два типа области видимости; Глобальный и локальный охват.
Я думаю, что MDN Web Docs дает прекрасное объяснение глобального масштаба;
В среде программирования глобальная область видимости - это область действия, которая содержит и видна во всех других областях. В клиентском JavaScript глобальной областью видимости обычно является веб-страница, внутри которой выполняется весь код.
Это означает, что если вы определяете переменную в глобальной области видимости, вы делаете эту переменную доступной глобально, вы можете получить к ней доступ во всех областях. Все переменные или функции, созданные внутри глобального объекта, являются членами глобального объекта. Этот глобальный объект отличается в зависимости от среды, в которой выполняется JavaScript. В Node.js глобальный объект равен global, тогда как в браузерах это окно.
Чтобы проверить объект окна в браузере, просто напишите window и войдите в консоль. Как видите, в нем уже много всего. Это встроенные, которые доступны. Некоторые из них могут быть даже знакомы. Объект Window не только хранит ваши глобально определенные переменные, он также имеет множество встроенных свойств, методов и так далее. Даже объект document, который мы часто используем, является собственностью Window Object.
Чтобы объяснить разницу между объектом окна и объектом документа, поскольку это может сбивать с толку, в этом сравнении объект документа является маленьким. Он представляет DOM, который является корнем HTML. Window Object совершенно другой, он содержит такую информацию, как window.history, window.location и window.document. Точно так же разницу можно уловить в различии между BOM (объектной моделью браузера) и DOM (объектной моделью документа).
Спецификация - это способ JavaScript взаимодействовать с браузером. Он включает такие объекты, как экран, история, навигатор, местоположение и документ. Модель моделирует весь документ HTML и является частью спецификации.
Window Object - это просто объект верхнего уровня. Вы не можете создать более высокий уровень иерархии, чем объект Window. Страница отображается в окне браузера. Он создается браузером и является объектом браузера, а не объектом JavaScript. Он содержит все встроенные элементы, а также те, которые мы создаем по всему миру. Если вы хотите проверить это, откройте консоль и напишите глобальную функцию;
function forTesting(){
console.log(‘I am a global function’);
}
Теперь напишите окно и войдите в консоль. Прокрутите вниз до F, вы увидите, что объект Window теперь имеет вашу глобальную функцию. Другой способ проверить это, вы можете вызвать свою функцию следующим образом:
forTesting() // I am a global function window.forTesting() // I am a global function
Как видите, результат тот же.
Чтобы понять, как работает Window Object, вы можете попробовать открыть и закрыть его. Откройте консоль и напишите;
window.open()
Затем в открывшемся окне, в консоли;
window.close()
Есть также методы, которые можно использовать для некоторых интересных вещей с Window Object;
screen.width // returns the width of the screen screen.height // returns the height of the screen location.href // returns the URL location.hostname // returns the domain name history.back() // goes back in the browser history.forward() // goes forward in the browser alert() // display alert box prompt() // display dialog box
Если вы хотите узнать больше об основах JavaScript, ознакомьтесь с серией статей «Изучение основ JavaScript».
Удачного кодирования !!!
