Esta pergunta já tem uma resposta aqui:

Recentemente, tentei criar um objeto como este:

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

Minhas intenções eram melhorar o desempenho do seletor do jQuery, armazenando em cache os resultados de$('#carousel1 .slider') em uma propriedade de objeto e para manter o código conciso e relativamente SECO.

No entanto, isso não funcionou. Quando o código foi executado, lançou uma exceção ao tentar analisar o valor depanes, reclamando quecarousel estava indefinido.

Isso faz sentido, já que eu assumiria quecarousel não é totalmente declarado até que a declaração de atribuição tenha sido totalmente executada. No entanto, eu gostaria de evitar recorrer a isso:

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

Isso não é muito pior, mas ocarousel O objeto terá várias outras propriedades que dependem dos valores de outras propriedades, para que possam se tornar rapidamente detalhadas.

Eu tentei usarthis, mas sem sucesso. Talvez eu não o tenha usado corretamente, ou isso pode não ser uma abordagem válida.

Existe uma maneira de as propriedades de um objeto se referirem a outras propriedades do mesmo objeto, enquanto esse objeto ainda está sendo declarado?

Com base nas respostas de Matthew Flaschen e casablanca (obrigado, pessoal!), Acho que estas são as versões do meu código real com as quais eu terminaria, com base em cada abordagem:

// 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');
})();

e

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

Supondo que ambos estejam corretos (não os testei), é uma decisão difícil. Acho que prefiro um pouco a abordagem de Matthew Flaschen, já que o código está contido em uma estrutura que se assemelha mais a uma declaração de objeto. No final, também existe apenas uma variável criada. No entanto, há muitasthis lá, o que parece repetitivo - embora possa ser apenas o preço a pagar.