solo use el nombre de var, popup_data

 popup_data = { club: { type: 'club', type_img: { header: 'CLUB HEADER', img: 'https://source.unsplash.com/random/800x600', sub_header: 'CLUB SUB HEADER', content: 'TEXT', hotspot_position: [5, -1.5, 2.5] }, hotspots_array: [ { id: () => popup_data.club.type + '-' + 'type_img', position: () => popup_data.club.type_img.hotspot_position, }, ] },

Lee esto y esto

¿Qué es esto ?
En JavaScript, la palabra clave this se refiere a un objeto .

El objeto depende de cómo this invoque (usar o llamar).

La palabra clave this se refiere a diferentes objetos dependiendo de cómo se use:

En un método de objeto, this se refiere al objeto .
Solo, this se refiere al objeto global.
En una función, this se refiere al objeto global .
En una función, en modo estricto, this es indefinido .
En un evento, this se refiere al elemento que recibió el evento.
Métodos como call() , apply() y bind() pueden hacer this a cualquier objeto .

Puede acceder a él por el nombre de variable al que asigna el objeto completo.

 popup_data = { club: { type: 'club', type_img: { header: 'CLUB HEADER', img: 'https://source.unsplash.com/random/800x600', sub_header: 'CLUB SUB HEADER', content: 'TEXT', hotspot_position: [5, -1.5, 2.5] }, hotspots_array: [ { id: () => popup_data.club.type + '-' + 'type_img', position: () => popup_data.club.type_img.hotspot_position, }, ] },

Dado que está utilizando la función de flecha ES6, this no funcionará en absoluto. Y si usó la función normal, this sería el objeto dentro de hotspots_array , no el objeto completo.

Si tiene más de un elemento y desea que todos esos elementos tengan acceso a la raíz, puede vincular la función. Necesitará usar ninguna función de flecha aquí, ya que no tienen un this ..

Incluso puede extraer su función de id y position del objeto también, para que no cree múltiples instancias de exactamente la misma función.

p.ej..

 function id() { return this.club.type + '-' + 'type_img'; } function position() { return this.club.type_img.hotspot_position; } const popup_data = { club: { type: 'club', type_img: { header: 'CLUB HEADER', img: 'https://source.unsplash.com/random/800x600', sub_header: 'CLUB SUB HEADER', content: 'TEXT', hotspot_position: [5, -1.5, 2.5] }, hotspots_array: [ { name: 'test', id, position }, { name: 'test2', id, position } ] } }; const popup_data_2 = { club: { type: 'this is club 2', type_img: { hotspot_position: [5, -1.5, 2.5] }, hotspots_array: [ { id, position } ] } }; function bindFunctions(r, a) { Object.entries(a).map(([k, v]) => { const tp = typeof v; if (tp === 'function') { a[k] = v.bind(r); } else if (tp === 'object') { bindFunctions(r, v); } }); } bindFunctions(popup_data, popup_data); bindFunctions(popup_data_2, popup_data_2); console.log(popup_data.club.hotspots_array[0].id()); console.log(popup_data.club.hotspots_array[0].position()); console.log(popup_data_2.club.hotspots_array[0].id());

Otra opción, tener un solo elemento raíz puede ser restrictivo. Si quisiera algo más elegante, crearía su Objeto usando una función y usaría el poder de los cierres. En el ejemplo a continuación, agregué otro accesorio que luego tiene acceso a su matriz.

 function makeObject(data) { const root = data; for (const h of data.club.hotspots_array) { //now lets add our functions h.id = () => root.club.type + '-' + 'type_img'; h.position = () => root.club.type_img.hotspot_position; h.array = data.club.hotspots_array; } return root; } const o1 = makeObject({ club: { type: 'club', type_img: { header: 'CLUB HEADER', img: 'https://source.unsplash.com/random/800x600', sub_header: 'CLUB SUB HEADER', content: 'TEXT', hotspot_position: [5, -1.5, 2.5] }, hotspots_array: [ { name: 'test', }, { name: 'test2', } ] } }); console.log(o1.club.hotspots_array[0].id()); console.log(o1.club.hotspots_array[0].position()); console.log('array:' + o1.club.hotspots_array[0].array.length);