创建Javascript类的正确方法是什么？

Question

我正在试图弄清楚如何正确构建我的Javascript类（或单例对象）。

var obj = new Object();
obj.foo = 'bar';
obj.method = function() { ...}

var obj = {
    foo : 'bar',
    method : function() { ...}
}

var obj = function(){}
obj.prototype = {
    foo : 'bar',
    method: function() { ... }
}

我希望能够设置几个属性并分配可用的方法。 我也想能够使用的东西像混入上的对象，所以我可以用的东西像延长这些对象的事件 。

Answer 1

我正在试图弄清楚如何正确构建我的Javascript类（或单例对象）。

这些（“类”和单例对象）之间存在很大差异。 你的前几个例子是一次性对象（单身人士）。 您的第三个（最后一个）示例创建了一个构造函数 ，该函数允许您创建共享相同原型的多个对象。 我建议在构造函数上增加 prototype属性，而不是像你一样替换它，例如：

var Thingy = function() {   // Or use a function declaration rather than expression
    // Optional initialization code here
};
Thingy.prototype.foo = 'bar';
Thingy.prototype.method = function() {
    // Method code here
};

（按照惯例，构造函数以大写字母开头。）

你使用的（单例或构造函数）取决于你需要什么。

从ES2015（又名“ES6”）开始，它更简单，虽然没有新的语法来定义非方法原型属性（你的foo ）; 一旦这个提案向前推进，可能会出现在ES2017或ES2018中，但直到那时：

class Thingy {
    constructor() {
        // Optional initialization code here
    }
    method() {
    // Method code here
    }
}
Thingy.prototype.foo = 'bar';

如果你需要进入继承层次结构，在旧的ES5语法中，涉及到相当多的管道：

var Base = function() {
};
Base.prototype.method = function(arg1) {
    // ...
};

var Derived = function() {
    Base.call(this);
};
Derived.prototype = Object.create(Base.prototype);
Derived.prototype.constructor = Derived;
Derived.prototype.method = function(arg1) {
    // Using Base's `method`, if desired, is a bit ugly:
    Base.prototype.method.call(this, arg1);
};

...这就是为什么你曾经看过踩过的图书馆，比如Prototype的Class东西，或者我自己的Lineage ; 那些已经过时的ES2015语法已经过时了，这简直太容易了：

class Base {
    method(arg1) {
        // ...
    }
}
class Derived extends Base {
    method(arg1) {
        // Use's the superclass's `method`, if desired, is easy:
        super.method(arg1);
    }
}

重新提出问题的标题 ：

创建Javascript类的正确方法是什么？

有几种同样正确的方法可以在JavaScript中创建对象的“类”，因为JavaScript是一种非常灵活的语言。 有标准的构造函数，“构建器”函数， Object.create （在启用ES5的环境中），它允许您进行更直接的原型继承，以及其他几个。 JavaScript的一大优点是你可以选择你的“课堂”风格。

Answer 2

你也可以使用类似的东西：

function O(x,y) {
   this.x=x;
   this.y=y;
   this.method=function() {...}
   return this;
}

var o=new O(0,0);

Answer 3

如果您正在寻找实用的解决方案而不是理论解决方案，那么最好使用框架。

• Backbone.js拥有您所需要的一切，包括mixins和事件系统。

如果你也需要一些小部件，请考虑

• 的Qooxdoo
• ExtJS的

它们都提供了一个干净的架构，可以在没有小部件的情况下使用，但它们需要比Backbone更多的学习。

这些框架提供的继承结构非常像基于类的通用结构（想想Java）。 那是因为他们在内部创建了特殊对象，仅仅作为其他人的prototype ，从而扮演了类的角色。

例如，当你调用Ext.define('MyClass', {extend: 'ParentClass', mixins: foo, ... }) ，Ext会创建一个function “ MyClass ”和一个匿名对象（ MyClass.prototype ）。拥有您提供的方法。

Answer 4

如果您的目标是支持ES5的浏览器或环境，那么您可以这样做：

var Person = {
  foo: ...,
  bar: ...
};

var Mike = Object.create(Person, { baz: ... });