javascript - 这些不同的对象创建方法在 JavaScript 中的正确应用是什么

Question

与前端人员相比，我更像是后端人员，但 JavaScript 引起了我的兴趣。我正在努力思考在我看来是多种不同的对象建模方法。

在过去的几年里，我主要编写的代码看起来与此类似(假设已加载 jQuery):

var TicketForm = {

    elements: ['input', 'textarea', 'select', 'checkbox'],

    enable: function(form) {
        this.elements.forEach( function(el) {
            form.find(el).prop('disabled', false);
        });
    },

    disable: function(form) {
        this.element.forEach( function(el) {
            form.find(el).prop('disabled', true);
        });
    }
};

这样我就可以简单地调用 TicketForm.enable($('#whatever')); 来启用特定的表单，这与 PHP 中的静态方法调用非常相似。

我最近一直在研究 PHP 中的闭包，我知道它们也存在于 JavaScript 中(并且我正在使用它们)。我正在尝试更彻底地真正掌握这个概念。在遇到这个惊人的脚本之后:http://codepen.io/stuffit/pen/KrAwx ，我决定要努力模仿那个作者的编码风格。只是试图复制他的风格，我像这样重写了我的代码:

var TicketForm = function() {
    this.elements = ['input', 'textarea', 'select', 'checkbox'];
};

TicketForm.prototype.enable = function(form) {
    this.elements.forEach( function(el) {
        form.find(el).prop('disabled', false);
    });
};

TicketForm.prototype.disable = function(form) {
    this.elements.forEach( function(el) {
        form.find(el).prop('disabled', true);
    });
};

但是，在这种情况下，当我调用 TicketForm.enable($('#whatever')); 时，出现错误

Uncaught TypeError: Object function () {
    this.elements = ['input', 'textarea', 'select', 'checkbox'];
} has no method 'enable'

所以我对 SO 进行了一些挖掘，发现 How does JavaScript .prototype work? .第二个答案特别有启发性，因为我来自类概念背景而不是原型(prototype)概念背景。我还翻阅了其中一些幻灯片:http://ejohn.org/apps/learn/#65 ，这也很有帮助。事实证明，我所要做的就是创建一个 TicketForm 实例，此时它的方法对我可用:

var myForm = new TicketForm();
myForm.enable(form); // works as expected

我有三个问题:

1. 除了个人编码风格之外，为什么人们会选择上述方法中的一种而不是另一种？
2. 为什么我必须使用第二种方法声明对象的实例，而使用第一种方法则不用？
3. 这两种编码风格是否有合适的名称？

Answer 1

您的第一个方法定义了一个对象文字，基本上创建了一个“单例”。如果您需要同一个“类”的多个实例，则需要一个构造函数(或 Object.create )。