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

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

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

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

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

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

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 object тогда OR-case станет активным и создаст новый объект, поэтому вы можете назначить ему функции. Например:

var FOO = {};

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

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

3

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

a || b

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

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

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

1

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

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