你如何从字面上解释这个对象

How Do You Explain This Object Literal?

本文关键字：对象 解释 字面上      更新时间：2023-09-26

我是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？

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

为了每次都使用新的对话框对象，我建议使用每次都返回一个新实例并隐藏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();

演示

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

您的"foo"函数显式和故意更改这些"设置"属性的值。毕竟，只有一个"设置"对象。如果要还原值，则必须编写一个函数来执行此操作。

相关文章：