Область видимости определяет доступность (видимость) переменных.
JavaScript имеет 3 типа области действия:
Область действия блока
Область действия функции
Глобальная область действия
До ES6 (2015) в JavaScript были только глобальная область видимости и область действия.
ES6 представил два важных новых ключевых слова JavaScript: let и const.
Эти два ключевых слова обеспечивают Область блока в JavaScript.
Переменные, объявленные внутри блока { }, недоступны. снаружи блока:
{
let x = 2;
}
// x can NOT be used hereПеременные, объявленные с помощью ключевого слова var, НЕ могут иметь область действия блока.
Доступ к переменным, объявленным внутри блока { }, можно получить из за пределами блока.
{
var x = 2;
}
// x CAN be used hereПеременные, объявленные внутри функции JavaScript, становятся МЕСТНЫЙ для функция.
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carNameПопробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Scope</h2>
<p><b>carName</b> is undefined outside myFunction():</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
let carName = "Volvo";
document.getElementById("demo1").innerHTML = typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML = typeof carName;
</script>
</body>
</html>
Локальные переменные имеют Область применения:
Доступ к ним возможен только из функции.
Поскольку локальные переменные распознаются только внутри своих функций, переменные с одинаковым именем можно использовать в разных функциях.
Локальные переменные создаются при запуске функции и удаляются при ее завершении.
В JavaScript есть область действия функции: каждая функция создает новую область видимости.
Переменные, определенные внутри функции, недоступны (видимы) снаружи. функция.
Переменные, объявленные с помощью var, let и const являются очень похоже, когда объявлено внутри функции.
Все они имеют Область применения:
function myFunction() {
var carName = "Volvo";
// Function Scope
}function myFunction() {
let carName = "Volvo"; //
Function Scope
}function myFunction() {
const carName = "Volvo"; //
Function Scope
}Переменная, объявленная вне функции, становится ГЛОБАЛЬНОЙ.
let carName = "Volvo";
// code here can use carName
function myFunction() {
// code here can also use carName
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Scope</h2>
<p>A GLOBAL variable can be accessed from any script or function.</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
myFunction();
function myFunction() {
document.getElementById("demo").innerHTML = "I can display " + carName;
}
</script>
</body>
</html>
Глобальная переменная имеет глобальную область действия:
Все сценарии и функции на веб-странице имеют доступ к нему.
Переменные, объявленные глобально (вне любой функции), имеют Глобальный масштаб.
Доступ к глобальным переменным можно получить из любого места программы JavaScript.
Переменные, объявленные с помощью var, let и const являются очень похоже, когда объявлено вне блока.
Все они имеют глобальную область действия:
var x = 2;
// Global scope let x = 2; //
Global scope const x = 2; //
Global scopeВ JavaScript объекты и функции также являются переменными.
Область определяет доступность переменных, объектов и функций из разные части кода.
Если вы присвоите значение переменной, которая не была объявлена, она автоматически станет ГЛОБАЛЬНОЙ переменной.
В этом примере кода будет объявлена глобальная переменная carName, даже если значение присваивается внутри функции.
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Variables</h2>
<p>If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable:</p>
<p id="demo"></p>
<script>
myFunction();
// code here can use carName as a global variable
document.getElementById("demo").innerHTML = "I can display " + carName;
function myFunction() {
carName = "Volvo";
}
</script>
</body>
</html>
Все современные браузеры поддерживают запуск JavaScript в «строгом режиме».
Вы узнаете больше о том, как использовать строгий режим, в следующей главе этого руководства.
В «строгом режиме» необъявленные переменные не становятся автоматически глобальными.
В JavaScript глобальная область видимости — это среда JavaScript.
В HTML глобальной областью действия является объект окна.
Глобальные переменные, определенные с помощью ключевого слова var, принадлежат объекту окна:
var carName = "Volvo";
// code here
can use window.carNameПопробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Scope</h2>
<p>In HTML, global variables defined with <b>var</b>, 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>
</body>
</html>
Глобальные переменные, определенные с помощью ключевого слова let, не принадлежат объекту окна:
let carName = "Volvo";
// code here can not use window.carNameПопробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Variables</h2>
<p>In HTML, global variables defined with <b>let</b>, will not become window variables.</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
// code here can not use window.carName
document.getElementById("demo").innerHTML = "I can not display " + window.carName;
</script>
</body>
</html>
НЕ создавайте глобальные переменные, если вы этого не хотите.
Ваши глобальные переменные (или функции) могут перезаписывать оконные переменные (или функции).
Любая функция, включая объект окна, может перезаписать ваш глобальный переменные и функции.
Время жизни переменной JavaScript начинается с момента ее объявления.
Функциональные (локальные) переменные удаляются после завершения функции.
В веб-браузере глобальные переменные удаляются при закрытии браузера. окно (или вкладка).
Аргументы функции (параметры) работают как локальные переменные внутри функций.