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

глядя на онлайн исходный код я наткнулся на это в верхней части нескольких исходных файлов.

var FOO = FOO || {};
FOO.Bar = …;

но я понятия не имею, что || {} делает.

Я знаю {} равна new Object() Я думаю || это что-то вроде "если он уже существует, использовать его, использовать новый объект.

почему я должен видеть это в верхней части исходного файла?

7 89
javascript namespaces or-operator variable-declaration

7 ответов:

ваша догадка относительно намерения || {} довольно близко.

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

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

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

и

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

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

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

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

142
var AEROTWIST = AEROTWIST || {};

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

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

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

это в основном то же самое, что говоря это:

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

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

20

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

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') {
  // ...
}
5

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

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

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

так что вам нужно использовать 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 (Ура!).

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

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

потому что если нет FOO объект затем OR-case станет активным и создаст новый объект, поэтому вы можете назначить ему функции. Например:

var FOO = {};

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

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

3

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

a || b

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

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

так что если a не был установлен (это undefined) он будет возвращать b.

1

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

var AEROTWIST;
AEROTWIST = AEROTWIST || {};
-1