1. ホーム
  2. javascript

JavaScriptのオブジェクトプロパティは、同じオブジェクトの別のプロパティを参照することができますか?[重複しています]。

2023-08-20 05:41:45

質問

最近、このようなオブジェクトを作ろうとしました。

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

の結果をキャッシュすることで、jQueryのセレクタのパフォーマンスを向上させることが私の意図でした。 $('#carousel1 .slider') の結果をオブジェクトのプロパティにキャッシュすることでjQueryのセレクタのパフォーマンスを向上させること、そしてコードを簡潔かつ比較的DRYに保つことです。

しかし、これはうまくいきませんでした。コードが実行されたときに panes の値を解析しようとしたときに例外が発生し、次のように文句を言いました。 carousel が未定義であることを訴えました。

これは理にかなっています、なぜなら私が想定しているのは carousel は代入文が完全に実行されるまで完全には宣言されないと考えるからです。しかし、私はこれに頼ることを避けたいと思います。

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

これでもまだマシな方ですが carousel オブジェクトは他のプロパティの値に依存するプロパティをさらにいくつか持つことになるので、すぐに冗長になる可能性があります。

を使ってみました。 this を使ってみましたが、効果がありませんでした。私はそれを正しく使っていなかったかもしれませんし、いずれにせよ有効なアプローチではないかもしれません。

オブジェクトのプロパティが、そのオブジェクトがまだ宣言されている間に、同じオブジェクトの他のプロパティを参照する方法はありますか?


Matthew Flaschenとcasablancaの回答(ありがとう、みんな!)に基づいて、私は、それぞれのアプローチに基づいて、私が最終的に得るであろう私の実際のコードのバージョンはこれらだと思います。

// 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のアプローチの方が、コードがオブジェクト宣言に近い構造に収まっているので、若干好きかもしれません。また、作成される変数も最終的に1つだけです。しかし、多くの this が多く、反復しているように見えますが、それはそれで代償なのかもしれません。

どのように解決するのですか?

オブジェクト・リテラルではありません ( this はリテラルの構築中も、構築前と同じ値を持ちます)。 しかし、次のようなことは可能です。

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

これは、無名関数コンストラクタから生成されたオブジェクトを使用しています。

なお $sliderpanes はパブリックなので carousel.$slider などとなります。