coding-style - JS库的这种模式有什么问题吗？

Question

我承认我对 javascript 的内部工作知之甚少，但需要创建一个库并且想学习(因此在这里问)。我理解使用闭包和导出到窗口不会污染全局命名空间，但除此之外它让我有点困惑。

(function() {
    var Drop = window.Drop = function() { 

        var files = [];

        var add = function(word) {
              files.push(word);    
              return files;
        }

        return {
            files: files,
            add: add
        }
    }
})()


// All of these seem to be the same?
var a = Drop();
var b = new Drop();
var c = new Drop;

// Each has their own state which is what I want.
a.add("file1");
b.add("file2");
c.add("file3");

• 为什么“初始化”Drop 的三种方式都一样？
• 究竟是什么让他们有能力拥有自己的状态？
• 是否有替代返回语法的方法来在 Drop 上导出这些函数？
• 是否有更好的最佳实践方法来创建这样一个独立的库？

我在网上搜索过，但发现关于这个主题的一致性非常低。

Answer 1

1. 第一种方法 ( Drop() ) 只是正常调用函数，所以 this是全局对象(在浏览器环境中为 window)。正如您所期望的那样，它完成它的工作然后返回一个对象。

   第二种方式(new Drop())创建一个新的Drop对象并使用 this 执行构造函数设置为该对象。但是，您不使用 this任何地方并返回从对象字面量创建的对象，因此 Drop对象被丢弃，取而代之的是返回对象字面量。

   第三种方式(new Drop)在语义上与第二种方式相同；这只是语法上的差异。

2. 它们都有自己的状态，因为每次你调用 Drop , 它有自己的一组局部变量，不同于任何其他对 Drop 的调用的局部变量.

3. 您可以转换您的代码以使用正常的 new语法和原型(prototype)。这有几个优点:即，您只创建 add函数一次而不是每个函数一次 Drop称呼。您修改后的代码可能如下所示:

   function Drop() {
       this.files = [];
   }
   Drop.prototype.add = function(word) {
       this.files.push(word);
       return this.files;
   };
   

   但是，通过这样做，您将无法在没有 new 的情况下调用它.但是，有一个解决方法:您可以将其添加为 function Drop 中的第一行:

   if(!(this instanceof Drop)) {
       return new Drop();
   }
   

   自从您使用 new 调用它以来, this将是 Drop , 并且当你在没有 new 的情况下调用它时, this将不是 Drop , 你可以看看 this是 Drop ，如果是，则继续初始化；否则，用 new 重新调用它.

   还有另一个语义差异。考虑以下代码:

   var drop = new Drop();
   var adder = drop.add;
   adder(someFile);
   

   您的代码将在这里工作。基于原型(prototype)的代码不会，因为 this将是全局对象，而不是 drop .这也有一个解决方法:在构造函数的某处，您可以这样做:

   this.add = this.add.bind(this);
   

   当然，如果您的库的使用者不打算将函数从对象中提取出来，您就不需要这样做。此外，您可能需要填充 Function.prototype.bind对于没有它的浏览器。

4. 没有。这完全取决于品味。