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 . Здесь мы затронем понятие область видимости переменных . Оно тесно связано с функциями , поэтому его Важно понимать .

Следует усвоить (и различать эти понятия) лишь одно - то, что переменные бывают глобальные и локальные .

Что такое глобальные переменные? Рассмотрим пример...

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 . Еще раз озвучим его суть: если мы создаем переменную внутри какой-либо функции, то она является локальной, и работать с ней мы сможем только внутри этой функции.

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

Переменные

Объявление переменных

Прежде чем использовать переменную в JavaScript, ее необходимо объявить. Переменные объявляются с помощью ключевого слова var следующим образом:

Var i; var sum;

Один раз использовав ключевое слово var, можно объявить несколько переменных:

Объявление переменных можно совмещать с их инициализацией:

Var message = "привет"; var i = 0, j = 0, k = 0;

Если начальное значение в инструкции var не задано, то переменная объявляется, но ее начальное значение остается неопределенным (undefined), пока не будет изменено программой.

Если вы имеете опыт использования языков программирования со статическими типами данных, таких как C# или Java, то можете заметить, что в объявлениях переменных в языке JavaScript отсутствует объявление типа. Переменные в языке JavaScript могут хранить значения любых типов. Например, в JavaScript допускается присвоить некоторой переменной число, а затем этой же переменной присвоить строку:

Var i = 10; i = "hello";

С помощью инструкции var можно объявить одну и ту же переменную несколько раз. Если повторное объявление содержит инициализатор, то оно действует как обычная инструкция присваивания.

Если попытаться прочитать значение необъявленной переменной, JavaScript сгенерирует ошибку. В строгом режиме, предусмотренном стандартом ECMAScript 5, ошибка также возбуждается при попытке присвоить значение необъявленной переменной. Однако исторически и при выполнении не в строгом режиме, если присвоить значение переменной, не объявленной с помощью инструкции var, то JavaScript создаст эту переменную как свойство глобального объекта, и она будет действовать практически так же, как корректно объявленная переменная. Это означает, что глобальные переменные можно не объявлять. Однако это считается дурной привычкой и может явиться источником ошибок, поэтому всегда старайтесь объявлять свои переменные с помощью var.

Область видимости переменной

Область видимости (scope) переменной - это та часть программы, для которой эта переменная определена. Глобальная переменная имеет глобальную область видимости - она определена для всей JavaScript-программы. В то же время переменные, объявленные внутри функции, определены только в ее теле. Они называются локальными и имеют локальную область видимости. Параметры функций также считаются локальными переменными, определенными только в теле этой функции.

Внутри тела функции локальная переменная имеет преимущество перед глобальной переменной с тем же именем. Если объявить локальную переменную или параметр функции с тем же именем, что у глобальной переменной, то фактически глобальная переменная будет скрыта:

Var result = "global"; function getResult() { var result = "local"; return result; }; console.log(getResult()); // Отобразит "local"

Объявляя переменные с глобальной областью видимости, инструкцию var можно опустить, но при объявлении локальных переменных всегда следует использовать инструкцию var.

В JavaScript есть три области видимости: глобальная, область видимости функции и блочная. Область видимости переменной - это участок исходного кода программы, в котором переменные и функции видны и их можно использовать. Глобальную область видимости иначе ещё называют кодом верхнего уровня.

Глобальные переменные

Переменная, объявленная вне функции или блока, называется глобальной . Глобальная переменная доступна в любом месте исходного кода:

Var num = 5; function foo() { console.log(num); } foo(); // 5 console.log(num); // 5 { console.log(num); // 5 }

Локальные переменные

Переменная, объявленная внутри функции, называется локальной . Локальная переменная доступна в любом месте внутри тела функции, в которой она была объявлена. Локальная переменная создаётся каждый раз заново при вызове функции и уничтожается при выходе из неё (при завершении работы функции):

Function foo() { var num = 5; console.log(num); } foo(); // 5 console.log(typeof num); // undefined

Локальная переменная имеет преимущество перед глобальной переменной с тем же именем, это означает, что внутри функции будет использоваться локальная переменная, а не глобальная:

Var x = "глобальная"; // Глобальная переменная function checkscope() { var x = "локальная"; // Локальная переменная с тем же именем, что и у глобальной document.write(x); // Используется локальная переменная, а не глобальная } checkscope(); // => "локальная" Попробовать »

Блочные переменные

Переменная, объявленная внутри блока с помощью ключевого слова let , называется блочной . Блочная переменная доступна в любом месте внутри блока, в котором она была объявлена:

Let num = 0; { let num = 5; console.log(num); // 5 { let num = 10; console.log(num); // 10 } console.log(num); // 5 } console.log(num); // 0

Повторное объявление

Если с помощью ключевого слова var повторно объявить переменную с тем же именем (в той же области видимости), то ничего не произойдёт:

Var a = 10; var a; console.log(a); // 10

Если повторное объявление сопровождается инициализацией, то такая инструкция действует как обычное присваивание нового значения:

Var a = 10; var a = 5; // Тоже самое, что и a = 5; console.log(a); // 5

Если с помощью ключевого слова let повторно объявить переменную с тем же именем (в той же области видимости), то будет вызвана ошибка:

Var a = 10; let a; // Ошибка.

Цепочка областей видимости

Рассмотрим следующий пример:

Var num = 5; function foo() { var num2 = 10; function bar() { var num3 = 15; } }

В этом коде три области видимости: глобальная, область видимости функции foo() и область видимости функции bar() . В глобальной области видимости определены переменная num и функция foo() . В области видимости функции foo() определены переменная num2 и функция bar() , в ней также доступна переменная num из глобальной области видимости. Область видимости функции bar() содержит одну переменную num3 , которая доступна только внутри функции bar() . В области видимости функции bar() также доступны переменные из двух других областей, потому что они являются родительскими по отношению к ней. Цепочка областей видимости для этого примера представлена на рисунке ниже:

На рисунке разные области видимости показаны прямоугольниками разного цвета. Внутренней области видимости в цепочке областей видимости доступно всё из внешних областей, но внешним областям не доступно ничего из внутренних областей видимости.

Цепочка областей видимости упорядочена. Интерпретатор производит поиск идентификаторов в цепочке областей видимости по направлению наружу, но не внутрь. Это означает, что поиск имени начинается с той области видимости, где было выполнено обращение к идентификатору. Если имя идентификатора обнаруживается, поиск прекращается. Если в текущей области видимости найти имя не удалось, выполняется поиск в следующей (во внешней) области видимости и т. д. Таким образом, будет использован идентификатор из той области видимости, в которой был найден. Если идентификатор не будет найден ни в одной из областей видимости JavaScript сгенерирует ошибку:

Var str = "глобальная"; var num = 5; function foo() { var str = "локальная"; // Используется локальная переменная str num = 10; // Используется глобальная переменная num // alert(x); // Ошибка. Переменной x нет ни в одной области видимости } foo(); alert(str); // "глобальная" alert(num); // 10

Если в теле функции необъявленной переменной присвоить значение то, в момент вызова функции, если в глобальной области видимости нет переменной с таким именем, будет создана новая глобальная переменная:

Function foo() { num = 2; } foo(); // Создана новая глобальная переменная num alert(num); // 2

Подъём объявлений

В JavaScript объявленные переменные доступны в любом месте относительно своей области видимости, это означает, что переменные оказываются видимы ещё до того, как будут объявлены в коде. Эта особенность JavaScript неофициально называется подъёмом: программный код ведёт себя так, как если бы объявления переменных неявно поднимались (без инициализации) на самый верх относительно своей области видимости.

Рассмотрим следующий фрагмент кода:

Var str = "глобальная"; function foo() { alert(str); // undefined var str = "локальная"; alert(str); // "локальная" } foo();

Посмотрев на код, можно было бы подумать, что первый alert должен вывести строку "глобальная", потому что объявление локальной переменной str ещё не было выполнено. Однако, на деле выводится значение undefined . Благодаря подъёму объявлений функция выше эквивалентна реализации, приведённой ниже, в которой объявление переменной поднято в начало функции:

Function foo() { var str; // Объявление локальной переменной в начале функции alert(str); // Здесь она доступна, но не инициализирована str = "локальная"; // Здесь она инициализируется alert(str); // А здесь она имеет ожидаемое значение - "локальная" }

Тоже самое касается и глобальной области видимости, переменная объявленная снизу, доступна наверху:

Alert(num); // undefined var num = 10; alert(num); // 10

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

Глобальный объект представляет собою обычный объект, который создаётся автоматически при запуске интерпретатора.

В JavaScript роль глобального объекта играет объект Window. Этот объект имеет свойство window, ссылающееся на сам объект Window. Объект Window одновременно является и глобальным объектом и помимо этого содержит ряд собственных свойств и методов для работы с окном браузера.

В программном коде верхнего уровня сослаться на глобальный объект можно также посредством ключевого слова this:

Alert(this === window); // true

Поскольку глобальные переменные являются свойствами глобального объекта то, работая с глобальной переменной, на самом деле, мы, работаем со свойствами window:

Var num = 10; alert(window.num); // 10

Вместо объявления переменной с помощью ключевого слова var, создать переменную можно и явно указав новое свойства объекту Window:

Window.num = 10; alert(num); // 10

Обратите внимание, что несмотря на то, что глобальные переменные на самом деле являются свойствами объекта Window, указывать его перед именем переменной необязательно:

Var num = 10; alert(num); // 10 alert(window.num); // 10. Тоже самое, что и alert(num);

Если глобальная переменная объявляется с помощью ключевого слова var или let , создаётся ненастраиваемое свойство, т. е. свойство, которое невозможно удалить с помощью оператора delete:

Var num = 10; alert(delete num); // false, переменная не удалена

Если необъявленной переменной присвоить некоторое значение, интерпретатор JavaScript автоматически создаст глобальную переменную. Переменные созданные таким способом, становятся обычными, настраиваемыми свойствами глобального объекта, т. е. могут быть удалены с помощью оператора delete:

Num = 10; alert(delete num); // true, переменная удалена

Методы Метод Описание
decodeURI() Возвращает строку, содержащую URI в декодированном виде.
decodeURIComponent() Возвращает строку, содержащую часть URI в декодированном виде.
encodeURI() Возвращает строку, содержащую URI в закодированном виде.
encodeURIComponent() Возвращает строку, содержащую часть URI в закодированном виде.
eval() Функция eval() выполняет код, переданный ей в виде строки. Код, переданный функции, выполняется в той области видимости, где была вызвана функция.
isFinite() Преобразует аргумент в число (если это необходимо) и возвращает true, если аргумент содержит любое значение отличное от NaN, положительной и отрицательной бесконечности. В этих трех случаях возвращает false.
isNaN() Определяет является передаваемый аргумент значением NaN или нет.
parseFloat() Анализирует строковый аргумент и возвращает число с плавающей точкой или NaN.
parseInt() Анализирует строковый аргумент и возвращает целое число или NaN.