Как и почему избегать глобальных переменных в JavaScript
Как JavaScrip управляет областями действия?
В языке JavaScript есть два типа областей видимости:
- Глобальный масштаб
- Локальный охват
JavaScript использует функции для управления областью видимости. Переменная, определенная внутри функции, находится в локальной области видимости и недоступна вне функции. Пока переменная, определенная вне функции, находится в глобальной области видимости. Каждая функция при вызове создает новую область видимости.
Имейте в виду, что каждая функция при вызове создает новую область видимости.
Проблема с глобальными переменными
Глобальные переменные легко перезаписываются другими скриптами. Например, когда две отдельные части приложения определяют глобальные переменные с одним и тем же именем, но с разными целями.
Веб-страницы также часто включают код, написанный, например, не разработчиками страницы.
- Сторонняя библиотека JavaScript
- Код из стороннего скрипта отслеживания и аналитики пользователей
- Различные виды виджетов, значков и кнопок
- Скрипты от рекламного партнера
Как избежать глобальных переменных в JavaScript?
Пример 1
Рассмотрим следующий пример. result
используется без объявления. Это может быть источником проблем.
function multiply(x, y) { //anti-pattern: implied a global variable result = x * y return result }
Практическое правило - всегда объявлять переменные с var
.
function multiply(x, y) { var result = x * y return result }
Пример 2
Другой пример, который создает подразумеваемые глобальные объекты, - это цепочка назначений как часть объявления var
. В следующем примере a является локальным, но b становится глобальным.
function makeSomething() { //anti-pattern: don't use var a = b = 0 ... }
Переписываю как следующие коды. И a, и b являются местными.
function makeSomething() { var a, b a = b = 0 ... }
Пример 3
Свойства можно удалить с помощью оператора удаления, а переменные - нет.
Имейте в виду, что свойства можно удалить с помощью оператора удаления, а переменные - нет.
Глобалы, созданные с помощью var
, удалить нельзя.
var x = 10 delete x << false
Подразумеваемые глобальные объекты, созданные без var
, могут быть удалены независимо от того, созданы ли они внутри функций.
x = 10 delete x << true function makeSomething() { y= 20 } delete y << true
Пример 4
Вы используете переменную, а затем объявляете ее далее в функции. Взгляните на этот пример.
x = "global" // global variable function makeSomething() { console.log(x) // undefined var x = "local" console.log(x) // local } makeSomething() console.log(x) << undefined << local << global
В JavaScript это позволяет нам иметь несколько операторов
var
в любом месте функции, и все они действуют так, как если бы переменные были объявлены в верхней части функции.
Фактически, приведенный выше фрагмент кода выглядит следующим образом. Переменная x объявлена в верхней части функции, но значение x по-прежнему установлено в текущей позиции.
x = "global" // global variable function makeSomething() { var x console.log(x) // undefined x = "local console.log(x) // local } makeSomething() console.log(x) << undefined << local << global
Глобальные переменные - это неплохо и даже не проблема безопасности, но они не должны перезаписывать значения другой переменной.
Спасибо, что прочитали 😘, до свидания, и не забудьте 👏 до 50 раз и подпишитесь!