Що означає "var FOO = FOO || {} "(Призначити змінну або порожній об'єкт цій змінній) означає в Javascript?

Дивлячись на вихідний код в Інтернеті, я натрапив на це у верхній частині кількох вихідних файлів.

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

Але я поняття не маю, що || {}робить.

Я знаю {}, що дорівнює, new Object()і я думаю, що ||це щось на зразок "якщо воно вже існує, використовуйте його значення, тоді використовуйте новий об'єкт.

Чому я бачив би це у верхній частині вихідного файлу?

Ваша здогадка щодо наміру || {}досить близька.

Цей конкретний малюнок, коли його бачите у верхній частині файлів, використовується для створення простору імен , тобто іменованого об'єкта, під яким можна створювати функції та змінні без надмірного забруднення глобального об’єкта.

Причина , чому це використовується , так що якщо у вас є два (або більше) файлів:

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

і

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

обидва вони мають одне і те саме простір імен, але не має значення, в якому порядку завантажуються два файли, ви все одно отримаєте func1і func2правильно визначитеся в MY_NAMESPACEоб'єкті правильно.

Перший завантажений файл створить початковий MY_NAMESPACEоб’єкт, а будь-який файл, що завантажується згодом, об'єкт збільшить .

Корисно, це також дозволяє асинхронне завантаження сценаріїв, які мають одне і те саме простір імен, що може покращити час завантаження сторінки. Якщо <script>теги мають deferнабір атрибутів, ви не можете знати, в якому порядку вони будуть інтерпретовані, тому, як описано вище, ця проблема також вирішує цю проблему.

var AEROTWIST = AEROTWIST || {};

В основному цей рядок говорить про встановлення AEROTWISTзмінної на значення AEROTWISTзмінної або встановлення її на порожній об'єкт.

Подвійна труба ||є оператором АБО, а друга частина АБО виконується лише в тому випадку, якщо перша частина повертає помилкове значення.

Тому, якщо AEROTWISTвже має значення, воно зберігатиметься як це значення, але якщо воно не було встановлено раніше, воно буде встановлене як порожній об'єкт.

це в основному те саме, що сказати це:

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

Сподіваюся, що це допомагає.

Ще одне поширене використання для || є також встановити значення за замовчуванням для невизначеного параметра функції також:

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

Є дві основні частини, які 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об'єкт (і , таким чином , скасовує існуючу від Барта) , тому він знає тільки про 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(Так!).

№2 Визначення нового об’єкта

Якщо ви прочитали перший приклад, то вже тепер, яка мета цього || {}.

Тому що, якщо існуючого FOOоб'єкта немає, то ІЛИ-корпус активується та створює новий об’єкт, тож ви можете призначити йому функції. Подібно до:

var FOO = {};

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

Якщо в AEROTWIST немає значення або воно є нульовим або невизначеним, значення, присвоєне новому AEROTWIST, буде {} (порожній об'єкт)

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

a || b

Якщо a truthy , воно повернеться a. Інакше воно повернеться b.

У falsy значення null, undefined, 0, "", NaNі false. Ціннісні значення - це все інше.

Отже, якщо aне було встановлено (чи це undefined), воно повернеться b.

Зауважте, що в деякій версії IE цей код не працюватиме, як очікувалося. Тому що varзмінна переосмислюється і призначається так - якщо я правильно пригадую проблему - у вас завжди з’явиться новий об’єкт. Це має вирішити проблему:

var AEROTWIST;
AEROTWIST = AEROTWIST || {};