JavaScript oop：正确设计类

Question

拿这个类似问题的列表：

1. How to set up JavaScript namespace and classes properly
2. Javascript namespace declaration with function-prototype
3. Best OOP approach to these two small JavaScript classes

我得出的结论是，在 JS 中实现 类 和 实例 有两种可能的方法：使用内部函数或使用原型。
因此，假设我们在命名空间 BOX_LOGIC 中有一个 Box 类，其中包含一个简单的代码。我可以编写以下代码：

BOX_LOGIC.Box = (function() {
    // private static
    var boxCount = 0;

    var classDefinition = function(x) {
        x = x || 0;
        var capacity = x;
        var id = ++boxCount;

        // public methods
        this.getCapacity = function() { return capacity; };
        this.getId = function() { return id; };
        this.add = function(weight) { 
            weight = weight || 0;
            if (capacity >= weight) {
                capacity -= weight;
            }   
            return capacity;
        };
    };
    return classDefinition;
})();

以及我能够编码：

BOX_LOGIC.Box = (function () {
    var boxCount;

    var Box= function (x) {
        x = x || 0;
        this.capacity = x;
        this.id = ++boxCount;
    };

    Box.prototype = {
        Constructor: Box,
        add: function (weight) {
            weight = weight || 0;
            if (this.capacity >= weight) {
                this.capacity -= weight;
            }   
            return this.capacity;
        }
    };
    return Box;
})();

我的问题是：使用 Box 原型 到底有什么区别？出于任何原因（成本、易读性、标准......），有什么方法更好吗？ 第二种方法是否可以模拟static idvariable？ THX！

Answer 1

我的问题是：使用 Box 原型到底有什么区别？

出于任何原因（成本、易读性、标准...）是否有更好的方法？

原型上的函数（和其他属性）在实例之间共享；如果您在构造函数中创建它们，每个实例都会获得所有这些函数的自己的副本。

主要好处是您可以添加到原型中，甚至已经存在的实例也可以看到添加的内容，因为它们动态使用原型。特别是，这有助于面向方面的编程以及各种调试和日志记录技术，因为您可以在原型上动态包装函数以捕获调用。当每个实例都有自己的实例时，你不能这样做（除非你有对每个实例的引用，这不太可能）。

理论上，使用原型也意味着更低的内存消耗。在实践中，您必须关心数百万个实例，而现代引擎擅长重用函数的底层代码，即使所涉及的函数对象是不同的。

因此，除非您要动态扩充原型，否则其中一个很大程度上是风格问题。

第二种方法是否可以模拟静态id 变量？

我不会称它为“静态的”；它是每个实例的私有。有多种方法可以通过原型方法接近私有信息（即原型函数可以访问的接近私有信息），但不可能真正获得私有信息信息原型功能可以访问。可能会有 ES7（不是 ES6，目前正在完成；ES7）。我解决了其中一种近乎私人的机制in this blog post。该帖子中的 ES6 信息现已过时；隐私的东西被推回 ES7，“private Name”对象变成了 Symbol，它根本不提供任何真正的隐私。

我应该标记您的第三个选项，您现在可以将其与 ES6 转译器一起使用：ES6 的 class:

// This is similar to the prototype version; `getCapacity` and
// `add` end up on `Box.prototype`
BOX_LOGIC.Box = (function () {

    class Box {
        constructor() {
            x = x || 0;
            this.capacity = x;
        }

        getCapacity() {
            return this.capacity;
        }

        add(weight) {
            weight = weight || 0;
            if (this.capacity >= weight) {
                this.capacity -= weight;
            }   
            return this.capacity;
        }
    }

    return Box;
})();

---

旁注：由于您在标题中使用了“正确”一词，因此我将在您的原型示例中标记一个非常小的问题：您搞砸了 constructor 属性。默认情况下，Box.prototype 有一个属性 constructor，它引用回 Box。但是通过将Box.prototype 上的对象替换 为完全不同的对象，您将删除它。为了与标准函数保持一致，我会这样修改它：

Box.prototype = {
    constructor: Box,
    //...the existing stuff goes here...
};

这有关系吗？仅当您最终得到依赖于 constructor 属性的代码时（某些库可能）。 JavaScript 本身没有任何作用，即使 JavaScript 规范定义了属性。