В предыдущем уроке мы научились объявлять переменные в JavaScript с помощью ключевого слова var и инициализировать для него значение.
Теперь мы разберемся с типами переменных в JavaScript и их областями действия.
В JavaScript существует два типа переменных, которые являются следующими:
- Глобальная переменная
- Локальная переменная
Давайте разберемся по очереди с помощью примеров программ.
Глобальная переменная в JavaScript
Глобальная переменная — это переменная, которая определена в основной части скрипта, но вне функции. Другими словами, переменная, определенная вне функций, называется глобальной переменной в JavaScript.
Они существуют повсюду во всем коде JavaScript. То есть мы можем получить доступ к глобальной переменной во всей программе JavaScript. Мы можем использовать их где угодно, даже внутри функций.
Глобальная переменная стирается, когда мы закрываем веб-страницу. Пример создания глобальной переменной с ключевым словом var в основном скрипте, вне каких-либо функций, выглядит следующим образом:
var studentAge = 25;
Этот оператор объявляет переменную с именем studentAge и присваивает ей значение 25. Здесь ключевое слово var может быть необязательным, поэтому этот оператор эквивалентен предыдущему:
studentAge = 25;
На самом деле, рекомендуется всегда использовать ключевое слово var, чтобы избежать ошибок и облегчить чтение скрипта.
Давайте возьмем очень простой пример программы, в которой мы объявим глобальную переменную и получим к ней доступ извне функции и внутри функции. Посмотрите на код скрипта, чтобы лучше понять.
Пример 1:
<script>
// Declare a global variable.
var message = "This is a global variable, and you can access it anywhere.";
// Create a function named display.
function display() {
document.write(message); // Accessing global variable from inside the function.
}
document.write(message, "<br>"); // Accessing from outside the function.
display(); // Calling function.
</script>
Вывод: Это глобальная переменная, и вы можете получить к ней доступ из любого места. Это глобальная переменная, и вы можете получить к ней доступ из любого места.
В приведенном выше коде мы объявили переменную message вне функции, которая отображает сообщение на веб-странице. Как вы можете заметить, мы получили доступ к глобальной переменной как изнутри функции, так и снаружи функции.
Локальная переменная в JavaScript
Локальная переменная — это переменная, которая определяется внутри тела функции с помощью ключевого слова var. Ее можно использовать или получить к ней доступ только внутри функции, в которой она определена.
Пример создания локальной переменной с использованием ключевого слова var внутри функции выглядит следующим образом:
function showMe(){
var localVariable = "I am local variable";
}
В этом примере мы определили переменную LocalVariable, имеющую значение «Я — локальная переменная». Это локальная переменная, поскольку она содержится в определенной функции. Когда выполнение функции завершается, интерпретатор JavaScript удаляет локальные переменные из памяти.
Кроме того, переменные, объявленные в списке параметров функции, всегда являются локальными переменными и определяются только в теле функции.
Если мы объявляем локальную переменную или функциональный параметр внутри тела функции с тем же именем, что и глобальная переменная, локальная переменная имеет приоритет над глобальной переменной. В этом случае мы скрываем глобальную переменную.
Давайте создадим простую программу, в которой мы объявим как локальные, так и глобальные переменные, получим к ним доступ и отобразим их сообщения.
Пример 2:
<script>
// Declare a global variable and assign it a value.
var message1 = "This is a global variable, and you can access it anywhere.";
// Create a function named display.
function display() {
// Declare a local variable and assign it a value.
var message2 = "This is a local variable, and you can access it only inside the function."
document.write(message2); // Accessing local variable from inside the function.
}
document.write(message1 +"<br>"); // Accessing the global variable.
display(); // Calling function.
</script>
Вывод: Это глобальная переменная, и вы можете получить к ней доступ где угодно. Это локальная переменная, и вы можете получить к ней доступ только внутри функции.
Давайте возьмем другую простую программу, в которой мы объявим две глобальные переменные и две локальные переменные внутри функции. Одна из глобальных и локальных переменных будет иметь общее имя student2.
Пример 3:
<script>
// Declare global variables.
var student1 = "John";
var student2 = "Larry";
// Create a function named showMe.
function showMe()
{
var student2 = "Harry"; // Here, local variable is sharing the same name as global variable.
var student3 = "Deep";
document.write(student2+ " " +student3+ "<br>");
}
showMe(); // calling function.
document.write(student1+ " " +student2);
</script>
Вывод: Гарри Дип Джон Ларри
В приведенном выше коде скрипта, когда мы вызвали переменную student2 из функции, отобразилось значение локальной переменной. Но когда мы вызвали student2 из глобального скрипта, значение глобальной переменной отобразилось на веб-странице.
Таким образом, наличие двух переменных с одинаковыми именами всегда сбивает с толку. Поэтому лучше всего использовать уникальные имена для всех переменных, чтобы избежать путаницы.
Область действия переменных в JavaScript
Область видимости переменной в JavaScript — это местоположение (или регион) программы (скрипта), в котором она была определена. Другими словами, область видимости переменной — это местоположение, из которого мы можем получить доступ к ее значению.
Глобальная область видимости
Когда мы определяем переменную в основной части кода скрипта (вне функции), она имеет глобальную область видимости. Мы можем получить к ней доступ отовсюду в программе JavaScript.
Все функции в программе могут обращаться к глобальным переменным, которые определены в основном тексте. Например, в приведенном ниже коде мы определили глобальную переменную msg в первой строке скрипта. Мы можем получить к ним доступ внутри функции.
var msg = "Global variable";
function displayMe(){
alert(msg);
}
displayMe(); // It will display "Global variable".
Эта функция не имеет никаких параметров и не объявляет внутри себя никакой локальной переменной. Итак, при вызове функции появится диалоговое окно с предупреждением с текстом «Глобальная переменная».
Локальная область видимости
Когда мы определяем переменную внутри функции JavaScript, она имеет локальную область видимости. Мы можем получить к ней доступ только в теле функции.
Поскольку она видна только в теле функции JavaScript, основной скрипт и другие функции не могут видеть эту переменную или получить к ней доступ.
Давайте рассмотрим пример, основанный на нем.
Пример 4:
<script>
var scope = "Global scope"; // Declaration of global variable.
// Create an outer function.
function showMe() {
var scope = "Local scope"; // Declaration of local variable.
// Create an inner function named nested.
function nested()
{
var scope = "Nested scope"; // A nested scope of local variable.
document.write(scope); // It will print "Nested scope".
document.write("<br>");
}
nested(); // calling inner function.
}
showMe(); // calling outer function.
document.write(scope); // It will print "Global scope".
</script>
Вывод: Вложенная область видимости Глобальная область видимости
В приведенном выше коде скрипта мы вложили определения функций. Каждая функция имеет свою собственную локальную область видимости, поэтому мы можем вложить несколько уровней локальной области видимости.
В JavaScript отсутствует область действия блока
В отличие от языков программирования C, C ++ и Java, JavaScript не имеет области видимости на уровне блоков. Все переменные, определенные в JavaScript, независимо от того, где они объявлены, определяются во всей функции.
Давайте разберемся в этой концепции с помощью примера.
Пример 5:
<script>
var scope = "global";
function showMe()
{
document.write(scope); // It will display "undefined", not "global".
var scope = "local"; // Here, we have initialized variable and defined everywhere.
document.write(scope); // It will display "local".
}
showMe(); // function calling.
</script>Первый оператор внутри функции будет отображать «неопределенное» значение, а не глобальное, потому что мы определили локальную переменную во всем теле функции, что означает, что глобальная переменная с таким же именем скрыта во всей функции.
Хотя локальная переменная не будет инициализироваться до тех пор, пока оператор var не будет выполнен.
Код, написанный внутри функции, эквивалентен следующему коду:
function showMe()
{
var scope;
document.write(scope);
document.write("<br>");
scope = "local";
document.write(scope);
}
Следовательно, наилучшей практикой программирования является объединение всех объявлений переменных вместе в начале любой функции.
Надеюсь, что в этом руководстве были рассмотрены почти все важные моменты, связанные с типами переменных в JavaScript, с примерами программ. Я надеюсь, что вы хорошо поняли область применения глобальных и локальных переменных. Спасибо за чтение!!!
