Что такое глобальные переменные и переменные окна в JavaScript?

Question

Я нашел эти заявления в W3Schools.

С JavaScript, глобальная область действия - это полная среда JavaScript. В HTML глобальная область видимости - это объект окна. Все глобальные переменные относятся к объекту window. Ваши глобальные переменные (или функции) могут перезаписывать переменные окна (или функции).

Не означает ли это, что глобальные и оконные переменные в основном одинаковы? И могу ли я получить доступ к переменной окна из другого окна, так как она связана с объектом окна или удаляется оконный объект после перехода в другое окно?

И это один тоже:

Любая функция, в том числе объект окна, может перезаписать глобальные переменные и функции.

и связанный с ним пример, как:

<p> 
In HTML, all global variables will become window variables. 
</p> 

<p id="demo"></p> 

<script> 
var carName = "Volvo"; 

// code here can use window.carName 
document.getElementById("demo").innerHTML = "I can display " + window.carName; 
</script> 

Что является объектом окна/переменная и как она отличается от глобального объекта/переменной?

Я действительно смущен. Может ли кто-нибудь объяснить это примером?

Answer 1

Весь код JavaScript выполняется в некоторой среде, чаще всего в браузере. Выполняемый код должен выполняться в некоторой «корневой» области, называемой глобальным контекстом или глобальной областью (подумайте об этом как о главном контейнере). В вашем браузере эта «корневая» область - это оконный объект (уникальный объект окна на вкладку/страницу/iframe).

Именно поэтому, когда в примере переменная объявляется в глобальной области var carName = "Volvo";, вы можете получить доступ к этой переменной в объекте окна window.carName, потому что при просмотре объекта 'window' глобальный объект.

При выполнении JavaScript с помощью узла, например, глобальный объект очень метко назвал global и в этой среде, если вы объявите var carName = "Volvo"; вы можете также получить доступ к переменной с помощью global.carName.

Выработать:

var myObject = { }; 
myObject.myVariable = 1; 
console.log(myObject.myVariable); // logs 1 

myVariable создан на MyObject, это делается в явном виде.

var myVariable = 1; // behind the scenes this declerations is doing window.myVariable = 1; 
console.log(window.myVariable); // logs 1 

myVariable неявно создается на window объект, который в контексте браузера является глобальным объектом.

Надеюсь, это прояснит ситуацию.

Для возможно лучшего объяснения я настоятельно рекомендую эту книгу серии https://github.com/getify/You-Dont-Know-JS специально для этого вопроса https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&%20closures/README.md#you-dont-know-js-scope--closures