JavaScript 中的原型 OO

Question

TL;DR：

在原型 OO 中我们需要工厂/构造函数吗？我们能否转变范式并彻底放弃它们？

背景故事：

我最近一直在尝试在 JavaScript 中进行原型 OO，发现 JavaScript 中 99% 的 OO 都是将经典的 OO 模式强加于其中。

我对原型面向对象的看法是它涉及两件事。方法（和静态数据）的静态原型和数据绑定。我们不需要工厂或建筑商。

在 JavaScript 中，这些是包含函数和 Object.create 的对象文字。

这意味着我们可以将所有内容建模为静态蓝图/原型和数据绑定抽象，最好直接连接到文档样​​式数据库中。即从数据库中取出对象并通过使用数据克隆原型来创建对象。这意味着没有构造函数逻辑，没有工厂，没有new。

示例代码：

一个伪示例如下：

var Entity = Object.create(EventEmitter, {
    addComponent: {
        value: function _addComponent(component) {
            if (this[component.type] !== undefined) {
                this.removeComponent(this[component.type]);
            }

            _.each(_.functions(component), (function _bind(f) {
                component[f] = component[f].bind(this);
            }).bind(this));

            component.bindEvents();

            Object.defineProperty(this, component.type, {
                value: component,
                configurable: true
            });

            this.emit("component:add", this, component);
        }
    },
    removeComponent: {
        value: function _removeComponent(component) {
            component = component.type || component;

            delete this[component];

            this.emit("component:remove", this, component);
        }
    }
}

var entity = Object.create(Entity, toProperties(jsonStore.get(id)))

次要解释：

特定代码很冗长，因为 ES5 很冗长。上面的Entity是一个蓝图/原型。任何具有数据的实际对象都可以使用 Object.create(Entity, {...}) 创建。

实际数据（在本例中为组件）直接从 JSON 存储加载并直接注入到 Object.create 调用中。当然，类似的模式也适用于创建组件，并且只有通过 Object.hasOwnProperty 的属性才会存储在数据库中。

首次创建实体时，它会使用空的 {}

实际问题创建：

现在我的实际问题是

• JS 原型 OO 的开源示例？
• 这是个好主意吗？
• 它符合原型 OOP 背后的思想和概念吗？
• 不使用任何构造函数/工厂函数会在某个地方咬我的屁股吗？我们真的可以不使用构造函数吗？使用上述方法是否有任何限制，我们需要工厂来克服它们。

Answer 1

我认为构造函数/工厂逻辑根本没有必要，只要您改变对面向对象编程的看法即可。在我最近对该主题的探索中，我发现原型继承更适合定义一组使用特定数据的函数。对于接受过经典继承训练的人来说，这并不是一个陌生的概念，但问题是这些“父”对象没有定义要操作的数据。

var animal = {
    walk: function()
    {
        var i = 0,
            s = '';
        for (; i < this.legs; i++)
        {
            s += 'step ';
        }

        console.log(s);
    },
    speak: function()
    {
        console.log(this.favoriteWord);
    }
}

var myLion = Object.create(animal);
myLion.legs = 4;
myLion.favoriteWord = 'woof';

因此，在上面的示例中，我们创建了与动物相关的功能，然后创建一个具有该功能的对象以及完成操作所需的数据。对于任何已经习惯了经典继承的人来说，无论时间长短，这都会让人感到不舒服和奇怪。它没有成员可见性的公共/私人/受保护层次结构的温暖模糊性，我将是第一个承认这让我紧张的人。

另外，当我看到上面的 myLion 对象初始化时，我的第一直觉是为动物创建一个工厂，这样我就可以用一个简单的函数创建狮子、老虎和熊（天哪）称呼。而且，我认为，这对大多数程序员来说是一种自然的思维方式——上面的代码冗长难看，而且似乎缺乏优雅。我还没有确定这是否仅仅是由于经典训练造成的，或者是否是上述方法的实际错误。

现在，谈谈继承。

我一直认为 JavaScript 中的继承是很困难的。原型链的来龙去脉并不完全清楚。直到您将其与 Object.create 一起使用，这将消除所有基于函数的新关键字重定向。

假设我们想要扩展上面的animal 对象，并创建一个人类。

var human = Object.create(animal)
human.think = function()
{
    console.log('Hmmmm...');
}

var myHuman = Object.create(human);
myHuman.legs = 2;
myHuman.favoriteWord = 'Hello';

这将创建一个以人类为原型的对象，而该对象又以动物为原型。很容易。没有误导，没有“原型等于函数原型的新对象”。只是简单的原型继承。这很简单，也很直接。多态性也很容易。

human.speak = function()
{
    console.log(this.favoriteWord + ', dudes');
}

由于原型链的工作方式，myHuman.speak 会先在 human 中找到，然后再在 animal 中找到，因此我们的人类是冲浪者而不仅仅是一个无聊的老动物。

所以，总而言之（TLDR）：

伪经典构造函数功能有点附加到 JavaScript 上，以使那些接受过经典 OOP 培训的程序员更加舒适。无论如何，这都不是必要的，但它意味着放弃成员可见性和（同义反复的）构造函数等经典概念。

您得到的回报是灵活性和简单性。您可以即时创建“类” - 每个对象本身就是其他对象的模板。在子对象上设置值不会影响这些对象的原型（即，如果我使用 var child = Object.create(myHuman)，然后设置 child.walk = 'not Yet'< /code>, animal.walk 不会受到影响 - 真的，测试一下）。

继承的简单性确实令人难以置信。我读了很多关于 JavaScript 继承的文章，并编写了很多行代码试图理解它。但它实际上可以归结为对象从其他对象继承。就这么简单，而 new 关键字所做的只是把它搞乱了。

这种灵活性很难充分利用，而且我确信我还没有做到这一点，但它确实存在，而且导航起来很有趣。我认为它没有被用于大型项目的大部分原因是它根本没有被充分理解，而且，恕我直言，我们被锁定在我们在学习时都学到的经典继承模式中。教过 C++、Java 等。

编辑

我认为我已经提出了一个很好的反对构造函数的案例。但我反对工厂的论点是模糊的。

经过进一步的思考，我多次摇摆不定，得出的结论是工厂也是没有必要的。如果为 animal（上图）赋予另一个函数 initialize，那么创建并初始化一个继承于 animal 的新对象将是微不足道的。

var myDog = Object.create(animal);
myDog.initialize(4, 'Meow');

新对象已初始化并可供使用。

@Raynos - 你完全是个书呆子在这件事上狙击了我。我应该做好五天毫无成果的准备。

Answer 2

根据您的评论，问题主要是“构造函数知识是否必要？”我觉得是的。

一个简单的例子是存储部分数据。在内存中给定的数据集上，当持久化时，我可能只选择存储某些元素（要么是为了效率，要么是为了数据一致性的目的，例如，一旦持久化，这些值本质上就没用了）。让我们进行一个会话，我在其中存储用户名和他们单击帮助按钮的次数（由于缺乏更好的示例）。当我在示例中坚持这一点时，我确实没有使用点击次数，因为我现在将其保存在内存中，下次加载数据时（下次用户登录或连接或其他任何情况）我将初始化值从头开始（大概为 0）。这个特殊的用例是构造函数逻辑的一个很好的候选者。

啊，但是您始终可以将其嵌入到静态原型中： Object.create({name:'Bob', clicks:0}); 当然，在本例中。但是，如果该值一开始并不总是 0，而是需要计算的值，该怎么办？嗯，比如说，用户的年龄以秒为单位（假设我们存储了姓名和出生日期）。同样，一项几乎没有什么用处的持久性，因为无论如何它都需要在检索时重新计算。那么如何在静态原型中存储用户的年龄呢？

显而易见的答案是构造函数/初始化程序逻辑。

还有更多场景，尽管我不认为这个想法与 js oop 或任何特定语言有太大关系。实体创建逻辑的必要性是我所看到的计算机系统模拟世界的方式所固有的。有时我们存储的项目将是简单的检索并注入到原型 shell 等蓝图中，有时值是动态的，需要初始化。

更新

好的，我将尝试一个更真实的示例，为了避免混淆，假设我没有数据库并且不需要保留任何数据。假设我正在制作一个纸牌服务器。每个新游戏（自然）将是 Game 原型的一个新实例。我很清楚，这里需要它们的初始化程序逻辑（以及很多逻辑）：

例如，我在每个游戏实例上不仅需要静态/硬编码的牌组，而且还需要随机洗牌的牌组。如果它是静态的，用户每次都会玩相同的游戏，这显然不好。

如果玩家用完，我可能还必须启动计时器来完成游戏。同样，不是静态的东西，因为我的游戏有一些要求：秒数与连接的玩家迄今为止赢得的游戏数量成反比（同样，没有保存的信息，只是此连接的数量） ，与洗牌的难度成正比（有一种算法可以根据洗牌的结果来决定游戏的难度）。

如何使用静态 Object.create() 来做到这一点？

Answer 3

可静态克隆“类型”的示例：

var MyType = {
  size: Sizes.large,
  color: Colors.blue,
  decay: function _decay() { size = Sizes.medium },
  embiggen: function _embiggen() { size = Sizes.xlarge },
  normal: function _normal() { size = Sizes.normal },
  load: function _load( dbObject ) { 
    size = dbObject.size
    color = dbObject.color 
  }
}

现在，我们可以在其他地方克隆此类型，是吗？当然，我们需要使用 var myType = Object.Create(MyType) ，但是这样就完成了，是吗？现在我们只需 myType.size 即可，这就是物体的大小。或者我们可以读取颜色，或者更改它等等。我们还没有创建构造函数或任何东西，对吧？

如果你说那里没有构造函数，那你就错了。让我向您展示构造函数在哪里：

// The following var definition is the constructor
var MyType = {
  size: Sizes.large,
  color: Colors.blue,
  decay: function _decay() { size = Sizes.medium },
  embiggen: function _embiggen() { size = Sizes.xlarge },
  normal: function _normal() { size = Sizes.normal },
  load: function _load( dbObject ) { 
    size = dbObject.size
    color = dbObject.color 
  }
}

因为我们已经创建了我们想要的所有内容，并且已经定义了所有内容。这就是构造函数所做的全部工作。因此，即使我们只克隆/使用静态事物（这就是我在上面的代码片段中看到的），我们仍然有一个构造函数。只是一个静态构造函数。通过定义类型，我们定义了构造函数。另一种方法是这种对象构造模型：

var MyType = {}
MyType.size = Sizes.large

但最终您将想要使用 Object.Create(MyType)，并且当您这样做时，您将使用静态对象来创建目标对象。然后就和前面的例子一样了。

Answer 4

对您的问题“我们是否需要原型 OO 中的工厂/构造函数？”的简短回答是没有。工厂/构造函数仅服务于 1 个目的：将新创建的对象（实例）初始化为特定状态。

话虽这么说，它经常被使用，因为某些对象需要某种初始化代码。

让我们使用您提供的基于组件的实体代码。典型的实体只是组件和几个属性的集合：

var BaseEntity = Object.create({},
{
    /* Collection of all the Entity's components */
    components:
    {
        value: {}
    }

    /* Unique identifier for the entity instance */
    , id:
    {
        value: new Date().getTime()
        , configurable: false
        , enumerable: true
        , writable: false
    }

    /* Use for debugging */
    , createdTime:
    {
        value: new Date()
        , configurable: false
        , enumerable: true
        , writable: false
    }

    , removeComponent:
    {
        value: function() { /* code left out for brevity */ }
        , enumerable: true
        , writable: false
    }

    , addComponent:
    {
        value: function() { /* code left out for brevity */ }
        , enumerable: true
        , writable: false
    }
});

现在以下代码将基于“BaseEntity”创建新实体

function CreateEntity()
{
    var obj = Object.create(BaseEntity);

    //Output the resulting object's information for debugging
    console.log("[" + obj.id + "] " + obj.createdTime + "\n");

    return obj;
}

看起来很简单，直到您去引用属性：

setTimeout(CreateEntity, 1000);
setTimeout(CreateEntity, 2000);
setTimeout(CreateEntity, 3000);

输出：

[1309449384033] Thu Jun 30 2011 11:56:24 GMT-0400 (EDT)
[1309449384033] Thu Jun 30 2011 11:56:24 GMT-0400 (EDT)
[1309449384033] Thu Jun 30 2011 11:56:24 GMT-0400 (EDT)

那么这是为什么呢？答案很简单：因为基于原型的继承。当我们创建对象时，没有任何代码可以在实际实例上设置属性 id 和 createdTime，就像构造函数/工厂中通常所做的那样。因此，当访问该属性时，它会从原型链中提取，最终成为所有实体的单个值。

其论据是应该向 Object.create() 传递第二个参数来设置该值。我的回答很简单：这不是与调用构造函数或使用工厂基本相同吗？这只是设置对象状态的另一种方式。

现在，在您的实现中，您将所有原型视为（理应如此）静态方法和属性的集合，您可以通过将属性值分配给来自数据源的数据来初始化对象。它可能没有使用 new 或某种类型的工厂，但它是初始化代码。

总结一下：
在 JavaScript 原型 OOP 中
- 不需要new
- 不需要工厂
- 通常需要初始化代码，这通常是通过 new、工厂或其他一些您不想承认正在初始化对象的实现来完成的