Почему следует избегать глобальных переменных в JavaScript?
Глобальные переменные — это переменные, объявленные или определенные вне каких-либо функций скрипта. Это указывает на то, что доступ к глобальным переменным можно получить из любой точки конкретного скрипта и они не ограничены функциями или блоками. Глобальные переменные JavaScript также могут быть объявлены внутри функции или блока, а затем доступны из любого места, как упоминалось ранее. Окно объект используется именно для этой цели.
Пример 1: определение глобальной переменной и ее использование в функции и блоке, а также определение глобальной переменной в функции с помощью окна объект и использовать его в той же функции и блоке, указывая глобальную область действия обеих переменных.
Javascript
<script> // Global variable "a" declared and assigned const a = "GFG"; // Global variable "b" declared inside a function function geeksForGeeks() { window.b = 12; } // Global variables "a" and "b" can // be used in this function function geeks() { console.log("From function: " + a, b); } geeksForGeeks(); geeks(); // Global variables "a" and "b" can // be used in this block as well { console.log("From block: " + a, b); }</script> |
Выход:
From function: GFG 12 From block: GFG 12
Объяснение: Первый пример дает представление о типичных способах создания глобальных переменных, а затем их использования или доступа к ним в JavaScript. Переменная a определяется в глобальном масштабе сценария с использованием традиционного синтаксиса. С другой стороны, переменная b объявляется и ей присваивается значение с окном объект. Применение этого объекта необходимо из-за того, что b объявлен внутри функции, следовательно, он имеет область действия по умолчанию, и объект окна преобразует его в глобальную область.
На первый взгляд может показаться, что глобальные переменные просты в использовании и более удобны, чем использование локальных функций и переменных блочной или локальной области видимости. Но правда в том, что использование глобальных переменных должно быть сведено к минимуму. Это связано с тем, что после объявления глобальной переменной ее можно легко изменить любой последовательной функцией или блоком, определенным в сценарии, или несколькими сценариями, и любое имя переменной может быть написано с ошибкой, что приводит к проблемам отладки, особенно для больших кодовых баз.
Для борьбы с этим всегда рекомендуется использовать локальные переменные везде, где это возможно. Теперь несколько функций или блоков могут иметь локально определенные переменные с одинаковыми именами и не вызывать конфликтов, что, в свою очередь, снижает вероятность ошибок.
Пример 2. Создание локальной переменной с локальной областью действия внутри функции, а также создание локальной переменной с тем же именем, что и у предыдущей локальной переменной в другой функции. Это гарантирует отсутствие конфликтов между несколькими переменными с одинаковыми именами, определенными в сценарии.
Javascript
<script> function GFG() { var localVariable = 12; // Local variable console.log("Local variable:", localVariable); } function geeksForGeeks() { // Local variable with same name, different value var localVariable = "Geek"; console.log("Local variable:", localVariable); } // Function call GFG(); geeksForGeeks();</script> |
Выход:
Local variable: 12 Local variable: Geek
Объяснение: Второй пример иллюстрирует использование локальных переменных с одинаковыми именами, но разными значениями в разных функциях. Если бы здесь использовалась глобальная переменная, то вторая переменная с тем же именем имела бы то же значение, что и первая переменная, из-за глобальной области действия, а не локальной области видимости, что не является желаемым поведением в этом примере. Вот почему локальные переменные должны использоваться везде, где это возможно, как упоминалось ранее.
Пример 3. В этом примере демонстрируется решение или обходной путь для использования глобальных переменных в JavaScript. Это включает в себя обертывание всего скрипта в функцию закрытия, а затем переменные, которые должны иметь глобальную область видимости, могут быть открыты вручную.
Javascript
<script> (function () { var myVar = "GFG"; console.log("This is within the closure function"); // Manually exposing the variable to global scope window["myVar"] = myVar; })(); console.log("Global variable:", myVar);</script> |
Выход:
This is within the closure function Global variable: GFG
Объяснение: В третьем примере показан альтернативный способ представления глобальных переменных, но без вышеупомянутых недостатков с использованием замыкающих функций. Переменная, которая должна иметь глобальную область видимости, может быть открыта вручную с использованием синтаксиса window["var_name"] = var_name . Тем не менее, рекомендуется по возможности избегать использования глобальных переменных и вместо этого использовать переменные с областью действия функции или с областью действия блока (с локальной областью действия).