創建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: ... });