"var FOO = FOO || {}"(将变量或空对象分配给该变量)在Javascript中意味着什么？

Question

看一下在线源代码,我在几个源文件的顶部看到了这个.

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

但我不知道是什么|| {}.

我知道{}是等于new Object(),我认为这||是为了"如果它已经存在使用其值,否则使用新对象.

为什么我会在源文件的顶部看到这个？

Answer 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属性集,则无法知道它们将以何种顺序被解释,因此如上所述,这也解决了该问题.

Answer 2

var AEROTWIST = AEROTWIST || {};

基本上这一行是说将AEROTWIST变量设置为变量的值AEROTWIST,或者将其设置为空对象.

双管道||是OR语句,OR的第二部分仅在第一部分返回false时执行.

因此,如果AEROTWIST已经有值,它将保留为该值,但如果之前未设置,则将其设置为空对象.

它与说这个基本相同:

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

希望有所帮助.

Answer 3

||的另一个常见用途 是也为未定义的函数参数设置默认值:

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

Answer 4

有两个主要部分var FOO = FOO || {};.

#1防止覆盖

想象一下,您的代码分为多个文件,您的同事也在处理一个名为的Object 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如果在HTML homer.js之后加载JavaScript文件,函数将会消失,bart.js因为Homer定义了一个新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!');
};

因为Bart和Homer现在FOO在定义他们的方法之前检查是否存在,所以你可以加载bart.js并homer.js以任何顺序加载彼此的方法(如果他们有不同的名字).所以,你总是会得到FOO它具有方法的对象skateboard和donut(耶!).

#2定义一个新对象

如果你已经阅读了第一个例子,那么你现在已经知道了它的目的是什么|| {}.

因为如果没有现有FOO对象,则OR-case将变为活动状态并创建一个新对象,因此您可以为其分配函数.喜欢:

var FOO = {};

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