定义一个包含变量，然后立即覆盖它

Question

在Javascript代码库中可以找到以下模式。如果变量已经存在或者使用空对象，则使用其值定义和初始化变量。然后立即被覆盖。

var outerVariable = outerVariable || {};
outerVariable = {
    // inner variable definitions follow
    // ...
};

这种模式是否有用？

Answer 1

不，我不相信这会做任何有用的事情 - 你不妨写一下：

var outerVariable = {
    // inner variable definitions follow
    // ...
};

......并放弃第一行......

如果已经定义了outerVariable，则无关紧要，因为我们可以覆盖它（Declaring a Javascript variable twice in same scope - Is it an issue?）。

使用'let'和'const'是另一回事..你无法重新定义这些变量。

Answer 2

是。定义一个空对象（如果不存在）。然后他就这个目标做了些什么。

Answer 3

当在文件顶部看到时，这种特定模式用于创建命名空间，即命名对象，在该命名对象下可以创建函数和变量而不会过度污染全局对象。

1 Preventing override:

想象一下，您将代码拆分为多个文件，并且您的同事也在处理名为Base的对象。然后它可能导致某人已经定义了Base并为其分配了功能（如pizza函数）。然后你会覆盖它，如果你没有检查它是否已经存在。

// Definition of co-worker "A" in "A.js"
var Base = {};

Base.pizza = function() {
  alert('I like pizza!');
};

// Definition of co-worker "B" in "B.js"
var Base = {};

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

在这种情况下，如果你在HTML中的pizza之后加载JavaScript文件B.js，A.js函数将会消失，因为B定义了一个新的Base对象（因此覆盖了A中的现有对象），所以它只知道donut函数。

所以你需要使用var Base = Base || {};，这意味着“Base将被分配给Base（如果它已经存在）或一个新的空白对象（如果Base已经不存在）。

Solution

    var Base = Base || {};

    // Definition of co-worker A in A.js
    Base.pizza = function() {
      alert('I like pizza!');
    };
    // Definition of co-worker B in B.js
    var Base = Base || {};

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

因为A和B现在在定义其方法之前检查Base的存在，所以您可以按任何顺序加载A.js和B.js，而不会覆盖彼此的方法（如果它们具有不同的名称）。所以你总会得到一个Base对象，其中包含pizza和donut（干杯！）的方法。

2 Defining a new object

如果您已经阅读了第一个示例，那么您现在已经知道了|| {}的目的是什么。

因为如果没有现有的Base对象，那么OR-case将变为活动状态并创建一个新对象，因此您可以为其分配函数。喜欢：

var Base = {};

Base.pizza = function() {
  alert('I like pizza!');
};

希望能帮助到你！