陷入了一个简单的对象文字范围/引用问题

Stuck on a simple object literal scope / referencing issue

本文关键字：文字 对象 范围 问题 引用 简单 一个      更新时间：2023-09-26

下面是我的结构示例：

this.is.a.really.long.namespace = {
    inputs : {},
    buttons : {},
    panels : {},
    fn : {
        abc : function() {},
        def : function() {}
    } 
};

现在，正如您所看到的，我将输入、按钮、面板和函数存储在它们各自的对象文字中。问题存在于fn.abc、fn.def或page.fn内部的任何其他函数中。我希望能够从fn内部的函数中访问我的inputs、buttons和panels。

很明显，我知道我可以键入this.is.a.really.long.namespace.inputs，但正如你所看到的，这很长，我不想为每个需要引用页面中对象的实例都键入它。

难道我没有办法从fn中直接引用inputs、buttons和panels吗？

我在想我可以做：

fn : {
    that : this.is.a.really.long.namespace,
    abc : function() {},
    def : function() {}
}

这将允许我在fn.abc中使用that.inputs，但这种方法有问题吗？有什么开销需要我注意吗？或者有更好的方法来实现这一点吗？

这没有错。事实上，由于以下原因，您可能会减少开销：

  1. 对象层次结构的运行时分辨率较低
  2. 更少的字符=更短的脚本

一个更加充实的结构是常用的"模块模式"

Javascript内部效率相当低（例如，它没有真正的索引数组），所以您可以做任何减少运行时查找的事情通常都是好的。创建一个指向长继承权的指针将比每次使用完整继承权快得多。这可能只在长循环中很重要，但由于它也更容易阅读，所以它只是速度更快的一个好处——没有缺点。

（编辑）

要对直对象执行此操作，可以执行类似的操作，使用jQuery简化添加属性：

this.is.a.long.namespace = {};
$.extend(this.is.a.long.namespace, 
   { that: this.is.a.long.namespace,
   ... // other properties 
   });

不过，一般来说，如果您正在构建函数对象，模块模式会更好，因为它更灵活，并且允许您使用范围来创建私有变量/对象。

this.is.a.long.namespace = (function() 
{
    var that = {},
       somePrivateVariable;
    function privateFunction() {
      ...
    } 
    that.inputs = {};
    ...
    // assign everything to "that"
    return that;
}());

如果您以这样一种方式构建对象，即每个级别都包含一个指向其上级别的parent参数，那么您可以通过这种方式访问数据。看看这个类似的问题。

好的。。。以下是我最终所做的：

this.is.a.really.long.namespace = {
    inputs  : { firstName : undefined },
    buttons : { submit : undefined },
    fn : {
        root : undefined,
        abc : function() { console.log(this.root.inputs.firstName); },
        def : function() { console.log(this.root.buttons.submit); }
    },
    init : function() {
        var self     = this,
            fn       = self.fn,
            inputs   = self.inputs,
            buttons  = self.button;
            fn.root  = this;  // this is the key
            inputs.firstName  = $("#first-name");
            buttons.submit    = $("#submit-button");
        fn.abc();
        fn.def();
    }
};

我会考虑这样的东西：

var namespace = this.is.a.really.long.namespace
this.is.a.really.long.namespace = {
    root : namespace,
    inputs : {},
    buttons : {},
    panels : {},
    fn : {
        abc : function() {},
        def : function() {}
    } 
};

从那里开始，在对象中的任何位置引用命名空间都应该没有问题。

相关文章：