JavaScriptのオブジェクトプロパティは、同じオブジェクトの別のプロパティを参照することができますか?[重複しています]。
質問
最近、このようなオブジェクトを作ろうとしました。
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;
})();
これは、無名関数コンストラクタから生成されたオブジェクトを使用しています。
なお
$slider
と
panes
はパブリックなので
carousel.$slider
などとなります。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] JavaScriptのオブジェクトにキーが存在するかどうかをチェックする?
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み】未定義のオブジェクトプロパティを検出する
-
[解決済み】JavaScriptのオブジェクトの長さ
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] オブジェクトリテラル/イニシャライザーの自己参照
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] イテレータでmap()を使用する
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] CORS: 認証モードは 'include' です。
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ