Question

我使用一个对象文字来收集我动态添加的各种DOM元素，因为我希望能够通过变量引用它们（下面的代码被简化，会有更多，比如事件等）：

ui = {
  header : $('<div id="header"></div>').appendTo('body').css('color','#009'),
  footer : $('<div id="footer"></div>').appendTo('body').css('color','#990')
}

现在我希望我可以添加其他对象，但它会引发错误：

ui = {
  header : $('<div id="header"></div>').appendTo('body').css('color','#009'),
  footer : $('<div id="footer"></div>').appendTo('body').css('color','#990'),
  headerSpecial : $('<span>some header</span>').appendTo(ui.header) // this line will cause an error "ui is not defined"
}

我想这是因为在ui对象关闭之前，我还无法引用任何内容。所以我必须把这些东西分成不同的对象。但是有什么方法可以在一个对象中完成所有这些操作吗？我应该在匿名函数中包装一些内容然后调用它们吗？

Answer 1

使用同一个对象来保存引用没有问题，但是不能在同一个文字表达式中使用自引用。分两步完成：

// create the object
ui = {
  header : $('<div id="header"></div>').appendTo('body').css('color','#009'),
  footer : $('<div id="footer"></div>').appendTo('body').css('color','#990')
}

// add a new property to the object
ui.headerSpecial = $('<span>some header</span>').appendTo(ui.header);

Answer 2

为什么不实例化一个匿名函数，而不是使用对象文字？

ui = new function () {
    this.header = $('<div id="header"></div>').appendTo('body').css('color','#009');
    this.footer = $('<div id="footer"></div>').appendTo('body').css('color','#990');
    this.headerSpecial = $('<span>some header</span>').appendTo(this.header);
};

JS对象文字范围和引用

2 个答案: