javascript - 你如何解释这个对象字面量？

Question

我是 Javascript Object Literal 的新手，我无法理解这种逻辑背后的机制，因此，我不知道在 Google 或 SO 中搜索正确的关键字。

这是我的问题的一个例子:

var dialog = {
    open: function(x){
        console.log(JSON.stringify(x))
    },
    type: {
        settings: {
            controller: '',
            click: false,
            clas: ''
        },
        foo: function(){
            this.settings.controller = 'Foo controller'
            this.settings.clas = 'Foo class'
            dialog.open(this.settings)
        },
        bar: function(){
            this.settings.click = true
            dialog.open(this.settings)
        }
     }
}

这是我的问题:

//A
dialog.type.foo();
//B
dialog.type.bar();
//C
dialog.type.foo();

为什么当我运行 //C 时，dialog.type.settings 仍然保留来自 foo 的值？ 我如何才能默认返回到 dialog.type.settings？

Answer 1

您只有一个对象可以使用，因此您在前面的步骤中更改的任何内容都将“保留”，直到您明确更改它们。

要每次都使用一个新的对话框对象，我建议使用一个函数，该函数每次都返回一个新实例并隐藏 settings 和 open 属性:

function dialog()
{
    var settings = {
        controller: '',
        click: false,
        clas: ''
    },
    open = function(x) {
        console.log(JSON.stringify(x));
    };

    return {
        type: {
            foo: function() {
                settings.controller = 'Foo controller';
                settings.clas = 'Foo class';
                open(settings);
            },
            bar: function() {
                settings.click = true;
                open(settings);
            }
        }
    };
}

然后:

var a = dialog();
a.type.foo();

var b = dialog();
b.type.bar();

var c = dialog();
c.type.foo();

Demo

它避免了您在各种上下文中使用 this 时会遇到的问题，因为 settings 和 open 始终在范围内您从 dialog() 函数返回的 API。