Una proprietà dell’object JavaScript può riferirsi a un’altra proprietà dello stesso object?

Recentemente ho provato a creare un object come questo:

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

Le mie intenzioni erano di migliorare le prestazioni del selettore di jQuery memorizzando nella cache i risultati di $('#carousel1 .slider') in una proprietà object e per mantenere il codice conciso e relativamente ASCIUTTO.

Tuttavia, questo non ha funzionato. Quando il codice è stato eseguito, ha generato un’eccezione durante il tentativo di analizzare il valore dei panes , lamentando che la carousel non era definita.

Questo ha senso, dal momento che carousel che la carousel non sia stata dichiarata completamente fino a quando la dichiarazione di assegnazione non è stata completamente eseguita. Tuttavia, vorrei evitare di ricorrere a questo:

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

Questo non è molto peggio, ma l’object del carousel avrà molte più proprietà che si basano sui valori di altre proprietà, in modo che possano diventare rapidamente prolissi.

Ho provato a usare this , ma senza risultato. Potrei non averlo usato correttamente, o comunque potrebbe non essere un approccio valido.

C’è un modo per le proprietà di un object di riferirsi ad altre proprietà dello stesso object, mentre quell’object è ancora stato dichiarato?


Basato su Matthew Flaschen e le risposte di Casablanca (grazie, ragazzi!), Penso che queste siano le versioni del mio codice reale con cui mi sarei ritrovato, basato su ciascun approccio:

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

Supponendo che siano entrambi corretti (non li ho testati), è una specie di chiamata difficile. Penso di preferire leggermente l’approccio di Matthew Flaschen, dal momento che il codice è contenuto in una struttura che assomiglia più a una dichiarazione di un object. C’è anche in definitiva solo una variabile creata. Tuttavia, c’è molto di this in là, che sembra ripetitivo – anche se questo potrebbe essere solo il prezzo da pagare.

Non con i letterali object ( this ha lo stesso valore durante la costruzione del letterale che ha fatto in precedenza). Ma puoi farlo

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

Questo utilizza un object creato da un costruttore di funzioni anonime.

Tieni presente che il $slider e i panes $slider sono pubblici, quindi è ansible accedervi come carousel.$slider , ecc.

Sfortunatamente no. La syntax {} avvia la creazione di un nuovo object, ma finché l’object non viene creato, non viene assegnato alla variabile del carousel . Inoltre, this valore può essere modificato solo in seguito a una chiamata di funzione. Se le tue “molte altre proprietà” dipendono solo dal slider , potresti andare in giro con qualcosa del genere:

 var slider = $('.slider'); var carousel = { panes: slider.children.length(), something: slider.something_else, // ... }; carousel.slider = slider;