在JavaScript中使用IIFE实现Singleton模式

Question

以前在我公司工作过的员工使用以下形式的Singleton模式来创建和获取JavaScript中的UI组件：

getDetailForm: function() {
    this.getDetailForm = (function() {
        var form = // form creation logic

        return function() {
            return form;
        };
    }());

    return this.getDetailForm();
}

是否有任何理由在以下标准方式下使用该变体？

getDetailForm: function() {
    var form;

    if (!form) {
        form = // form creation logic
    }

    return form;
}

Answer 1

第二个代码块将不记得变量形式的值：每次调用getDetailForm函数时，它代表一个新的闭包，并在该范围内创建一个新的变量形式 ，每次都以undefined开头。

查看以下内容如何在每次调用时打印“ init” ：

 var o = { getDetailForm: function() { var form; if (!form) { form = 'form'; // form creation logic console.log('init'); } return form; } } console.log(o.getDetailForm()); console.log(o.getDetailForm()); 

您可以通过在单例对象的范围内声明form来使其工作，为此您可以使用构造函数实例化该对象，同时该对象是form变量的闭包：

 var o = new function () { var form; this.getDetailForm = function() { if (!form) { form = 'form'; // form creation logic console.log('init'); } return form; } }; console.log(o.getDetailForm()); console.log(o.getDetailForm()); 

查看现在输出如何只显示一次“ init” 。

区别

您提供的第一个版本有一个很小的优势：第一次调用后，该函数将被一个非常基本的函数取代：

function() {
    return form;
};

该功能中甚至没有if 。 这只是return 。 有人可能会因此认为这是优选的：此函数的任何后续调用的if条件的求值都不会损失性能，当多次调用该方法时，除第一个函数外，总是返回相同的结果时间。

但是，如果您直接在构造函数中分配要形成的值，则也可以使用构造函数模式来实现。 然后，您不再需要方法中的if ，因为初始化已在构造函数中进行。

请注意，这并不完全相同，因为现在构造函数正在进行繁重的工作，将（可能非常耗时的）表达式赋给form 。 您提供的第一个代码的优点是，只有在第一次调用该函数时才能完成此操作，您可以考虑这样做的一个优点：“不要在可能永远不会使用的东西上浪费时间”。