在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。启用（$（“#无论什么”）来启用特定的表单，非常类似于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时。启用（$（“#无论什么”） 在这种情况下，我得到了错误

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

所以我在SO上做了一点研究，发现JavaScript是如何工作的。原型？。第二个答案特别有启发性，因为我来自类概念背景，而不是原型概念背景。我还翻了几张幻灯片：http://ejohn.org/apps/learn/#65，这也很有帮助。事实证明，我所要做的就是创建一个TicketForm实例，此时它的方法对我来说是可用的：

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

我有三个问题：

1. 为什么除了个人编码风格之外，人们会选择上面的任何一种方法而不是另一种方法？
2. 为什么我必须用第二种方法声明对象的实例，而不是用第一种方法？
3. 这些编码样式中的任何一种都有专有名称吗？




Answer 1

第一个方法是一个“literal对象”，非常像一个静态类，“this”指的是父对象“TicketForm”，您可以像“self”一样理解它。在第二种方法中，“this”指的是窗口，它不是oo，除非您：

var myForm = new TicketForm();

这里"this"指的是myForm实例。此方法是构造函数方法（TicketForm是构造函数）

Answer 2

在JavaScript中，默认情况下对象是可变的。这意味着，除非您使用的是现代JavaScript引擎，并且有人故意阻止修改对象，否则您始终可以添加、删除和修改对象中的属性。

在第一种情况下，您使用的是简化对象创建的特殊语法。{}语法创建了一个简单的对象，它只不过是对象的一个实例。这与JS中对象的易变性相结合，意味着以下html" target="_blank">代码段都是等效的：

var TicketForm = {
  elements: ['input', 'textarea', 'select', 'checkbox']
};

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

var TicketForm = new Object();
TicketForm.elements = ['input', 'textarea', 'select', 'checkbox'];

本质上，使用{}类似于在经典OOP语言中创建对象的实例，而创建构造函数类似于使用类。在构造函数及其原型中，您定义了该构造函数的所有实例（共享该原型的所有对象）将采用的蓝图。

所以这不是关于风格，而是关于你需要创造什么。如果需要同一事物的多个副本，则使用构造函数。如果您只需要一个，只需创建一个简单的对象，无需遵循礼节，创建一个单件并以一式三份的形式签署所有内容；）

Answer 3

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