JavaScript对象属性是否可以引用同一对象的另一个属性？ [英] Can a JavaScript object property refer to another property of the same object?

问题描述

我最近尝试创建这样的对象：

I recently tried to create an object like this:

var carousel = {
      $slider: $('#carousel1 .slider'),
      panes: carousel.$slider.children().length
    };

我的意图是通过缓存 $的结果来提高jQuery的选择器性能（ '#carousel1 .slider'）在一个对象属性中，并保持代码简洁且相对干燥。

My intentions were to improve jQuery's selector performance by caching the results of $('#carousel1 .slider') in an object property, and to keep the code concise and relatively DRY.

然而，这并没有工作。当代码执行时，它在尝试解析 panes 的值时抛出异常，抱怨 carousel 未定义。

However, this didn't work. When the code executed, it threw an exception when trying to parse the value of panes, complaining that carousel was undefined.

这是有道理的，因为我假设 carousel 在赋值语句被删除之前未完全声明完全执行。但是，我想避免诉诸于此：

This makes sense, since I'd assume that carousel isn't fully declared until the assignment statement has been fully executed. However, I'd like to avoid resorting to this:

var carousel = {};
carousel.$slider = $('#carousel1 .slider');
carousel.panes = carousel.$slider.children().length;

这不是太糟糕了，但是 carousel object将有更多属性依赖于其他属性的值，因此很快就会变得冗长。

That's not too much worse, but the carousel object will have several more properties that rely on the values of other properties, so that could quickly become verbose.

我尝试使用 this ，但无济于事。我可能没有正确使用它，或者这可能不是一种有效的方法。

I tried using this, but to no avail. I may well not have been using it correctly, or that may not be a valid approach anyway.

对象的属性是否有办法引用其他属性同一个对象，而该对象仍然被声明？

Is there a way for properties of an object to refer to other properties of the same object, while that object is still being declared?

基于Matthew Flaschen和casablanca的答案（谢谢，伙计们！），我认为这些是我最终得到的实际代码的版本，基于每种方法：

Based on Matthew Flaschen and casablanca's answers (thanks, guys!), I think these are the versions of my actual code that I'd end up with, based on each approach:

// Matthew Flaschen

var carousel = new (function() {
  this.$carousel = $('.carousel');
  this.$carousel_window = this.$carousel.find('.window');
  this.$carousel_slider = this.$carousel.find('.slider');
  this.$first_pane = this.$carousel.find('.slider').children(':first-child');
  this.panes = this.$carousel_slider.children().length;
  this.pane_gap = this.$first_pane.css('margin-right');
})();

和

// casablanca

var $carousel = $('.carousel'),
    $carousel_slider = $carousel.find('.slider'),
    $first_pane: $carousel.find('.slider').children(':first-child');

var properties = {
  $carousel_window: $carousel.find('.window'),
  panes: $carousel_slider.children().length,
  pane_gap: $first_pane.css('margin-right')
};

properties.$carousel = $carousel;
properties.$carousel_slider = $carousel_slider;
properties.$first_pane = $first_pane;

假设这些都是正确的（我没有测试过它们），这是一个艰难的电话。我认为我稍微偏爱Matthew Flaschen的方法，因为代码包含在一个更接近于对象声明的结构中。最终也只创建了一个变量。但是，那里有很多这个，这似乎是重复的 - 虽然这可能只是支付的价格。

Assuming those are both correct (I haven't tested them), it's kind of a tough call. I think I slightly prefer Matthew Flaschen's approach, since the code is contained to a structure that more closely resembles an object declaration. There's also ultimately only one variable created. However, there's a lot of this in there, which seems repetitive - although that may be just the price to pay.

推荐答案

不使用对象文字（此在构造它之前执行的文字时具有相同的值）。但你可以做到

Not with object literals (this has the same value during constructing of the literal that it did before-hand). But you can do

var carousel = new (function()
{
      this.$slider =  $('#carousel1 .slider');
      this.panes = this.$slider.children().length;
})();

这使用从匿名函数构造函数创建的对象。

This uses an object created from an anonymous function constructor.

请注意 $ slider 和 panes 是公开的，因此可以作为 carousel。$ slider 等。

Note that $slider and panes are public, so can be accessed as carousel.$slider, etc.

这篇关于JavaScript对象属性是否可以引用同一对象的另一个属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！