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
    };

我的目的是通过在对象属性中缓存 $('#carousel1 .slider') 的结果来提高 jQuery 选择器的性能，并保持代码简洁和相对干燥.

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 对象将有更多的属性依赖于其他属性的值，因此很快就会变得冗长.

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 的方法，因为代码包含在一个更类似于对象声明的结构中.最终也只创建了一个变量.然而，里面有很多this，看起来是重复的——尽管这可能只是要付出的代价.

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.

推荐答案

不适用于对象字面量(this 在构造字面量期间具有与之前所做的相同的值).但是你可以做

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屋！