Продолжаем изучать тему функций в JavaScript . Здесь мы затронем понятие область видимости переменных . Оно тесно связано с функциями , поэтому его Важно понимать .
Следует усвоить (и различать эти понятия) лишь одно - то, что переменные бывают глобальные и локальные .
Что такое глобальные переменные? Рассмотрим пример...
var global = 21 ; /* Создаем Глобальную переменную */
function
myFun
() /* Создаем функцию, которая выводит на экран переменную */
{
document.write
(global
);
}
myFun (); /* Вызываем функцию */
В этом примере мы создали переменную global , которая является глобальной - теперь мы можем ее использовать - например, внутри функции, как Вы сами можете убедиться.
В этом и заключается суть глобальных переменных - они создаются один раз (скажем, в начале скрипта, как Вы видели в примере) и потом используются в коде программы там, где это необходимо (в массивах, функциях и т.д.) .
Что такое локальные переменные? И снова рассмотрим пример...
function
myFun
_2
() /* Создаем функцию */
{
var local
=
42
;
document.write
(local
);
}
myFun _2(); /* Вызываем функцию */
Этот пример иллюстрирует создание локальной переменной local . Она локальная, так как создана внутри функции . И только внутри нее может использоваться.
Если эту переменную попробовать вывести за пределами функции, то в окне браузера мы ничего не увидим.
function
myFun
_2
() /* Создаем функцию */
{
var local
=
42
; /* Создаем Локальную переменную */
document.write
(local
);
}
document.write (local ); /* Пробуем вывести Локальную переменную за пределами функции */
На этих простых примерах мы рассмотрели понятие область видимости переменных в JavaScript . Еще раз озвучим его суть: если мы создаем переменную внутри какой-либо функции, то она является локальной, и работать с ней мы сможем только внутри этой функции.
А переменные, созданные вне функции, называются глобальными и могут использоваться где угодно, в том числе и внутри функции .
Последнее обновление: 05.04.2018
Все переменные в JavaScript имеют определенную область видимости, в пределах которой они могут действовать.
Глобальные переменныеВсе переменные, которые объявлены вне функций, являются глобальными:
var x = 5; let d = 8; function displaySquare(){ var z = x * x; console.log(z); }
Здесь переменные x и d являются глобальными. Они доступны из любого места программы.
А вот переменная z глобальной не является, так как она определена внутри функции.
Локальные переменныеПеременная, определенная внутри функции, является локальной:
Function displaySquare(){ var z = 10; console.log(z); let b = 8; console.log(b); }
Переменные z и b являются локальными, они существуют только в пределах функции. Вне функции их нельзя использовать:
Function displaySquare(){ var z = 10; console.log(z); } console.log(z); //ошибка, так как z не определена
Когда функция заканчивает свою работу, то все переменные, определенные в функции, уничтожаются.
Сокрытие переменныхЧто если у нас есть две переменных - одна глобальная, а другая локальная, которые имеют одинаковое имя:
Var z = 89; function displaySquare(){ var z = 10; console.log(z); // 10 } displaySquare(); // 10
В этом случае в функции будет использоваться та переменная z, которая определена непосредственно в функции. То есть локальная переменная скроет глобальную.
var или letПри использовании оператора let каждый блок кода определяет новую область видимости, в которой существует переменная. Например, мы можем одновременно определить переменную на уровне блока и на уровне функции:
Let z = 10; function displayZ(){ let z = 20; { let z = 30; console.log("Block:", z); } console.log("Function:", z); } displayZ(); console.log("Global:", z);
Здесь внутри функции displayZ определен блок кода, в котором определена переменная z. Она скрывает глобальную переменную и переменную z, определенную на уровне функции. В реальной программе блок мог быть предеставлять вложенную функцию, блок цикла for или конструкции if. Но в любом случае такой блок определяет новую область видимости, вне которого переменная не существует.
И в данном случае мы получим следующий консольный вывод:
Block: 30 Function: 20 Global: 10
С помощью оператора var мы не можем определить одновременно переменную с одним и тем же именем и в функции, и в блоке кода в этой функции:
Function displaySquare(){ var z = 20; { var z = 30; // Ошибка! Переменная z уже определена console.log("Block:", z); } console.log("Function:", z); }
То есть с помощью var мы можем определить переменную с одним именем либо на уровне функции, либо на уровне блока кода.
КонстантыВсе, что относится к оператору let, относится и к оператору const, который позволяет определить константы. Блоки кода задают область видимости констант, а константы, определенные на вложенных блоках кода, скрывают внешние константы с тем же именем:
Const z = 10; function displayZ(){ const z = 20; { const z = 30; console.log("Block:", z); // 30 } console.log("Function:", z); // 20 } displayZ(); console.log("Global:", z); // 10
Необъявленные переменныеЕсли мы не используем это ключевое слово при определении переменной в функции, то такая переменная будет глобальной. Например:
Function bar(){ foo = "25"; } bar(); console.log(foo); // 25
Несмотря на то, что вне функции bar переменная foo нигде не определяется, тем не менее она доступна вне функции во внешнем контексте.
Иначе было бы если бы мы не только присваивали значение переменной, но и определяли бы ее:
Function bar(){ var foo = "25"; } bar(); console.log(foo); // ошибка
strict modeОпределение глобальных переменных в функциях может вести к потенциальным ошибкам. Чтобы их избежать используется строгий режим или strict mode:
"use strict"; function bar(){ foo = "25"; } bar(); console.log(foo);
В этом случае мы получим ошибку SyntaxError: Unexpected identifier , которая говорит о том, что переменная foo не определена.
Установить режим strict mode можно двумя способами:
добавить выражение "use strict" в начало кода JavaScript, тогда strict mode будет применяться для всего кода
добавить выражение "use strict" в начало тела функции, тогда strict mode будет применяться только для этой функции
Переменные служат "контейнерами" для хранения информации.
Вы Помните Школьную Алгебру?Вы помните школьную алгебру? x=5, y=6, z=x+y
Вы помните, что буква (например x) могла бы использоваться для хранения значения (например 5), и что вы могли бы использовать информацию выше, чтобы вычислить, что значение z равно 11?
Эти буквы называются переменными , и переменные могут использоваться для хранения значений (x=5) или выражений (z=x+y).
Переменные JavaScriptТак же как в алгебре, переменные JavaScript используются для хранения значений или выражений.
Переменная может иметь короткое имя, например x, или более информативное имя, например carname (название автомобиля).
Правила для имен переменных JavaScript:
- Имена переменных чувствительны к регистру (y и Y это две разных переменных)
- Имена переменных должны начинаться с буквы или символа подчеркивания
Замечание: Поскольку JavaScript чувствителен к регистру, имена переменных также чувствительны к регистру.
ПримерЗначение переменной может изменяться во время выполнения скрипта. Вы можете ссылаться на переменную по ее имени для отображения или изменения ее значения.
Объявление (Создание) Переменных JavaScriptСоздание переменных в JavaScript более часто называют "объявлением" переменных.
Вы объявляете переменные JavaScript с помощью ключевого слова var :
После выполнения предложений выше, переменная x будет содержать значение 5 , и carname будет содержать значение Мерседес .
Замечание: Когда вы присваиваете текстовое значение переменной, заключайте его в кавычки.
Замечание: Если вы объявляете переменную повторно, она не потеряет свое значение.
Локальные Переменные JavaScriptПеременная, объявленная внутри функции JavaScript становится ЛОКАЛЬНОЙ и будет доступна только в пределах этой функции. (переменная имеет локальную область видимости).
Вы можете объявлять локальные переменные с одним и тем же именем в различных функциях, потому что локальные переменные распознаются в функции, в которой они объявлены.
Локальные переменные уничтожаются при выходе из функции.
Вы узнаете больше о функциях в последующих уроках JavaScript.
Глобальные Переменные JavaScriptПеременные объявленные вне функции становятся ГЛОБАЛЬНЫМИ , и все скрипты и функции на странице могут к ним обращаться.
Глобальные переменные уничтожаются когда вы закрываете страницу.
Если вы объявляете переменную, не используя "var", переменная всегда становится ГЛОБАЛЬНОЙ .
Присваивание Значений Необъявленным Переменным JavaScriptЕсли вы присваиваете значения переменным, которые еще не были объявлены, переменные будут объявлены автоматически как глобальные переменные.
Эти предложения:
Вы узнаете больше об операторах в следующем уроке JavaScript.
В JavaScript , существует две области видимости: локальная и глобальная. Зависит от того, где объявлена переменная, внутри функции или вне функции.
Если переменная объявлена внутри функции, то она называется локальной, если переменная объявлена вне функции, то она называется глобальной.
Современная концепция программирования, рекомендует чтобы все переменные в скриптах (программах) были локальными , а сама программа состояла лишь из функций, где каждая функция выполняла бы только одну задачу . Например в другом языке web-программирования PHP, вообще отказались от использования глобальных переменных.
Глобальные переменные в JavaScriptГлобальные переменные объявляются вне функций и к ним можно обратиться (получить доступ) из любой функции или строки программы.
Var russia; russia = "Россия"; function getValueRussia() { alert(russia); } getValueRussia();
Здесь russia — это глобальная переменная, так как она объявлена вне функции. Чтобы доказать что переменная глобальная, мы обратились к ней изнутри пользовательской функции getValueRussia() , с помощью функции alert() которая вывела на экран значение переменной russia .
Локальные переменные в JavaScriptЛокальные переменные в JavaScript, объявляются внутри функций. Получить доступ к локальным переменным можно только внутри той функции в которой они объявлены.
Function getValueRussia() { var russia; russia = "Россия"; } alert(russia);
В данном примере, ничего не произойдет (окошко с надписью «Россия» , не появится) , а если просмотреть скрипт через консоль, то он сообщит нам том что переменная russia — не определена (undefined), это означает что функция alert() (размещённая вне функции), не видит переменную russia , которую создали внутри функции.
Function getValueRussia() { var russia; russia = "Россия"; alert(russia); } getValueRussia();
Разместив функцию alert() внутри функции и затем вызвав функцию getValueRussia() , мы увидим окошко с надписью «Россия» . Данные примеры показывают нам, что к локальным переменным можно обращаться только внутри функции, в которой они созданы.
Глобальные переменные в javascript
Что есть глобальные переменные: переменные "видимые" в любой точке выполнения
программы, везде из можно прочитать и перезаписать.
Обычно глобальные переменные определяются в самом начале программы, вне всяких
блоков ({})
в случае Js, они задаются после script, или все всяких функций
hello = "Hello"; //задаем глобальную переменную и проверяем ее
document.writeln("->1 "+ hello +" every one
");//->1 Hello every one
If(true)
//if(false)
{
var hello = "Hello Dolly and "; //это тоже глобальная
world = "world"; //глобальная
var cont = ", we continue" //глобальная
document.writeln("->1.2 " + hello + world + cont+"
");
//1.
}
document.writeln("->2 " + hello + world + cont+"
");
//->2 Hello Dolly and world, we continue
При условии true мы получаем ответ
->1 Hello every one
->1.2 Hello Dolly and world, we continue
->2 Hello Dolly and world, we continue
Выполнение обрывается
Таким образом, получается, что на глобальную область использование var никак не влияет. Переменная, упомянутая в script вне процедур считается глобальной даже, если она заключения в скобочки {} блока if while for и других области останется глобальной даже внутри циклов
Выводы, кратко
* для переменных используемых в зоне глобальной видимости не важно наличие var.
* Блоки после if while for не создают локальной зоны видимости, (как это
происходит в других языках)
Локальные переменные- переменные задаваемые внутри исполняемого блока (функции) и не виляют на другие функции. и внешнюю среду, т.е. глобальную область.
Boy = "Jhone";
did = "kills Kenny"; //итак мы имеем 2 глобальных переменных
function doit()
{
//уже прошла печать --1, и мы меняем данные меняем данные
var boy = "Gary"; //создаем локаль
did = "helps Anny"; //изменяем глобаль
;
document.writeln("--2 " + boy + " " + did + "
");
//--2 Gary helps Anny
;
//теперь внутри функции зададим локальную и глобальные переменные
var good = "he was a good boy
";//локаль!
bad = "he likes a bad girls
";//глобаль
}
;
document.writeln("--1 " + boy + " " + did + "
");
//--1 Jhone kills Kenny
doit();
//--2 Gary helps Anny
document.writeln("--3 " + boy + " " + did + "
");
//--3 Jhone helps Anny
;
if(!true)
//if(!false)
{
document.writeln("--4 " + good);
//выполнение этого блока вызовет ошибку.
//мы сейчас находимся вне локальной области видимости
//функции doit(), поэтому для нас заданной через var
//переменной good просто не существует
}
document.writeln("--5 " + bad);
//--5 he likes a bad girls
Результат:
1 Jhone kills Kenny
--2 Gary helps Anny
--3 Jhone helps Anny
--5 he likes a bad girls
Локальные переменные в javascript
* var работает внутри функции, объявляя локальную переменную. Это основная его задача
* Яваскрип сильно отличается от си уже тем что только(?) внутри функции возможны
локальные переменные.
* использование var или не использование в глобальной области видимости зависит
только от вашего личного опыта. Но по мне так лучше не ленится. в перле это
называется use strict
>>>для переменных используемых в зоне глобальной видимости не важно наличие var
Важно. Во-первых, “вары” нельзя удалить (с помощью delete). Во-вторых, их конкретизация происходит на “нулевой строке” (до начала работы “построчно”), где им сразу же присваивается значение undefined, и только потом переменная может получить (а может не получить) новое значение:
Var glb_1 = 1;
if (false) {var glb_2 = 2; glb_3 = 3;}
Alert(glb_1) // конкретизирована и получила значение 1
alert(glb_2) // конкретизировна и получила значение ‘undefined’
alert(glb_3) // вообще не переменная (нет var), ошибка при обращении