Как и почему избегать глобальных переменных в 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 раз и подпишитесь!