对象内部的 for (var o in this)

Question

我使用 p5.js 库制作了一个小沙盒：http://gosuness.free.fr/balls/

我正在尝试实现一种方法来处理侧面的选项，这些选项是使用键盘快捷键切换的。

这是我尝试做的：

var options = 
{
    Option: function(name, value, shortcut)
    {
        this.name = name;
        this.shortcut = shortcut;
        this.value = value;
        this.show = function ()
        {
             var texte = createElement("span",this.name + " : " + this.shortcut + "<br />");
            texte.parent("options");
            texte.id(this.name);
        }
    },

    toggle: function(shortcut)
    {
        for (var o in this)
        {
            console.log(o);
            if (o.shortcut == shortcut)
            {
                o.value = !o.value;
                changeSideText("#gravity",gravity);
                addText("Toggled gravity");
            }
        }
    }
};

我在对象选项中实例化每个选项：

var gravity = new options.Option("gravity", false,"G");
var paintBackground = new options.Option("paintBackground",false,"P");

当我调用函数 options.toggle 时，console.log(o) 给了我“Option”“toggle”。但我想要的是让for (var o in this) 给我对象选项的属性列表，在这种情况下是重力和paintBackground

我该怎么做？

谢谢！

Answer 1

当您创建 Option 的实例时，它不会保存在变量 options 中，而是保存在提供的变量中。

var gravity = new options.Option("gravity", false,"G");

创建一个位于重力变量下的 Option 实例。

您的 for (var o in this) 迭代器迭代选项属性，并使用对象方法的正确输出。

如果您希望您的代码将 Option 的新实例存储在 options 变量中，您可以像这样修改代码

var options = 
{
    instances: [],
    Option: function(name, value, shortcut)
    {
        this.name = name;
        this.shortcut = shortcut;
        this.value = value;
        this.show = function ()
        {
            var texte = createElement("span",this.name + " : " + this.shortcut + "<br />");
            texte.parent("options");
            texte.id(this.name);
        }
        options.instances.push(this);
    },

    toggle: function(shortcut)
    {
        for (var i in this.instances)
        {
            console.log(this.instances[i]);
            if (this.instances[i].shortcut == shortcut)
            {
                this.instances[i].value = !this.instances[i].value;
                changeSideText("#gravity",gravity);
                addText("Toggled gravity");
            }
        }
    }
};

这是您的示例，按照您的预期工作，但我不认为这是一种可靠的设计模式。