javascript - 引用嵌套对象的最有效方法

Question

我的查询:

引用嵌套 JavaScript 对象的最有效方法是什么？到目前为止，我已经找到了几个，并且想知道哪个是最有效的，以及是否还有比我在这里列出的更好的其他方法。问题涉及根对象的使用，类似于许多 JavaScript 框架使用的对象。 根对象是强制性的。请不要发布不使用根对象的答案。

请注意，这是专门用于具有长名称的根/子根对象 - 引用 a.b 是无用的，而引用 abcdefghijklm.nopqrstuvwxyz 将非常有用。

编辑:

只是为了澄清几件事:

• 通过效率，我的意思是首先是代码长度(这反过来会影响性能，但这不太重要)。我担心代码长度部分是因为文件大小——是的，之后我会缩小它——但也因为任何查看我的原始代码(包括我自己)的人的可读性。性能也略微重要，我不希望长时间的解决方法会减慢执行速度。
• 引用主要针对常用的子对象，不是每个单独的。我声明(在方法 1 中)需要创建许多全局变量 - 因为我假设所有第一级子对象都将被常用。

要引用的对象:

对象 foo 包含各种子对象 bar、baz 和 qux，每个子对象包含各种其他对象。

var foo = {

    bar: {

        bar: {},
        baz: {},
        qux: {}

    },
    baz: {

        bar: {},
        baz: {},
        qux: {}

    },
    qux: {

        bar: {},
        baz: {},
        qux: {}

    }

};

方法 1 - 引用变量:

第一种方法涉及为每个子对象创建一个变量。

var bar = foo.bar;
var baz = foo.baz;
var qux = foo.quz;

foo.bar.baz 可以简单地通过 bar.baz 引用，而 foo.qux.qux 通过 qux .qux.

优点:

• 引用变量可以非常简洁——单个字符是可能的最小长度。

缺点:

• 如果要引用的子对象很多，这会增加全局变量的数量。这可能会导致冲突、跨脚本等 - 尤其是使用单字符变量名时。
• 需要为每个嵌套对象创建一个新的引用变量。这不仅不方便，而且还要求程序员记住在修改对象后创建每个变量。相反，如果一个子对象被移除，而程序员忘记也移除引用变量，那么代码就会被无用的全局变量弄得一团糟。

方法二——引用函数:

第二种方法涉及创建一个函数，该函数根据几个参数返回一个子对象。

function ref(a, b) {

    //Ensure that the first parameter is passed:
    if (!a) {

        return false;

    }

    return foo.a.b;

};

foo.bar.baz 然后可以通过 ref("bar", "baz") 和 foo.qux,qux 引用> 通过 ref("qux", "qux")。

优点:

• 适用于所有一级子对象，无需重复和困惑的单独变量定义。

缺点:

• 只有在缩短根对象时才真正有用——如果根对象被命名为a，那么使用引用函数实际上会延长代码。

Answer 1

假设我们有一个图形控制对象，它是一个 GraphicObject 类(函数)的实例。
假设一个实例看起来像:

grControl = {
   visual : {
     boundingBox : { x : , y : , width: , height : ... },
     ...
   },
   action : {
     ...
   }
};

创建快捷方式的正确方法是:
• 在将使用它的函数中的 var 中本地缓存适当的对象:

function drawBBox (someGraphicControl) {
     var bbox = someGraphicControl.visual.boundingBox;
     // maybe you want also to cache sub-properties :
     var width = bbox.width;
     ...
}

• 在原型(prototype)上定义将提供对嵌套属性的访问的 getter 和/或 setter:

// read-only example
Object.defineProperty(GraphicControl.prototype, 'width', 
                                { get : function() { 
                                           return this.visual.boundingBox.width }, 
                                  enumerable : true};


// read-write example
Object.defineProperty(GraphicControl.prototype, 'width', 
                                { get : function() { 
                                           return this.visual.boundingBox.width }, 
                                  set : function(val) {
                                           this.visual.boundingBox.width = val ; }, 
                                  },
                                  enumerable : true};

这样你可以使用:

 grObject.width  

并准确指代:

 grObject.visual.boundingBox.width