Что означает "var FOO = FOO || {}" (назначить переменную или пустой объект этой переменной) в Javascript?

Ответ 1

Ваше предположение о намерении || {} довольно близко.

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

Причина, по которой он используется, заключается в том, что если у вас есть два (или более) файла:

var MY_NAMESPACE = MY_NAMESPACE || {};
MY_NAMESPACE.func1 = {
}

и

var MY_NAMESPACE = MY_NAMESPACE || {};
MY_NAMESPACE.func2 = {
}

оба из них используют одно и то же пространство имен, тогда не имеет значения, в каком порядке загружаются два файла, вы по-прежнему получаете правильно func1 и func2 в объекте MY_NAMESPACE.

Первый загруженный файл создаст исходный объект MY_NAMESPACE, и любой впоследствии загруженный файл будет увеличивать объект.

Использование также позволяет асинхронную загрузку сценариев, которые используют одно и то же пространство имен, что может улучшить время загрузки страницы. Если теги <script> имеют набор атрибутов defer, вы не можете знать, в каком порядке они будут интерпретироваться, так, как описано выше, это также исправляет эту проблему.

Ответ 2

var AEROTWIST = AEROTWIST || {};

В основном эта строка говорит, что для параметра AEROTWIST значение AEROTWIST задано значение переменной AEROTWIST или установить его в пустой объект.

Двойной канал || является оператором OR, а вторая часть OR выполняется только в том случае, если первая часть возвращает false.

Следовательно, если AEROTWIST уже имеет значение, оно будет сохранено как это значение, но если оно не было установлено ранее, оно будет установлено как пустой объект.

это в основном то же самое, что и сказать:

if(!AEROTWIST) {var AEROTWIST={};}

Надеюсь, что это поможет.

Ответ 3

Другое распространенное использование для || - установить значение по умолчанию для параметра функции undefined также:

function display(a) {
  a = a || 'default'; // here we set the default value of a to be 'default'
  console.log(a);
}

// we call display without providing a parameter
display(); // this will log 'default'
display('test'); // this will log 'test' to the console

Эквивалент в другом программировании обычно таков:

function display(a = 'default') {
  // ...
}

Ответ 4

Существуют две основные части, которые покрывает var FOO = FOO || {};.

# 1 Предотвращение переопределений

Представьте, что ваш код разделен на несколько файлов, и ваши сотрудники также работают над объектом с именем FOO. Тогда это может привести к тому, что кто-то уже определил FOO и назначил ему функции (например, функцию skateboard). Тогда вы бы переопределили его, если бы вы не проверяли, существует ли он.

Проблемный случай:

// Definition of co-worker "Bart" in "bart.js"
var FOO = {};

FOO.skateboard = function() {
  alert('I like skateboarding!');
};

// Definition of co-worker "Homer" in "homer.js"
var FOO = {};

FOO.donut = function() {
  alert('I like donuts!');
};

В этом случае функция skateboard исчезнет, ​​если вы загрузите файл JavaScript homer.js после bart.js в свой HTML, потому что Гомер определяет новый объект FOO (и, таким образом, переопределяет существующий из Bart), поэтому он знает только о функции donut.

Итак, вам нужно использовать var FOO = FOO || {};, что означает, что FOO будет присвоено FOO (если оно уже существует) или новый пустой объект (если FOO уже не существует).

Решение:

var FOO = FOO || {};

// Definition of co-worker Bart in bart.js
FOO.skateboard = function() {
  alert('I like skateboarding!');
};

// Definition of co-worker Homer in homer.js
var FOO = FOO || {};

FOO.donut = function() {
  alert('I like donuts!');
};

Поскольку Барт и Гомер теперь проверяют существование FOO, прежде чем они определяют свои методы, вы можете загрузить bart.js и homer.js в любом порядке без переопределения друг друга (если у них разные имена). Таким образом, вы всегда получите объект FOO, который имеет методы skateboard и donut (Yay!).

# 2 Определение нового объекта

Если вы прочитали первый пример, вы уже знаете, в чем цель || {}.

Потому что, если нет существующего объекта FOO, тогда объект OR станет активным и создаст новый объект, поэтому вы можете назначить ему функции. Как:

var FOO = {};

FOO.skateboard = function() {
  alert('I like skateboarding!');
};

Ответ 5

Если в AEROTWIST нет значения или оно равно null или undefined, значение, назначенное новому AEROTWIST, будет {} (пустой объект)

Ответ 6

Оператор || принимает два значения:

a || b

Если a truthy, он вернет a. В противном случае он вернет b.

Значения фальши: null, undefined, 0, "", NaN и false. Истинные ценности - это все остальное.

Итак, если a не был установлен (это undefined), он вернет b.

Ответ 7

Обратите внимание, что в некоторой версии IE этот код не будет работать должным образом. Поскольку var, переменная переопределяется и назначается так - если я правильно помню проблему - вы получите всегда новый объект. Это должно решить проблему:

var AEROTWIST;
AEROTWIST = AEROTWIST || {};