Как создать наследование ключа в объекте от другого ключа?

Question

Имеется объект следующего вида:

const main = {
    template: {
        content: document.querySelector('#template').content,
        element: document.querySelector('#template').content.querySelector('.element')
    }
}

У меня есть объект main, в котором есть объект template, в котором имеются два ключа content и element. Оба ключа выполняют поиск по селектору.

Вопрос, каким образом можно создать переиспользование кода и вместо полного обращения к селектору, указать переменную content и использовать ее в качестве основного элемента, от которого будет идти поиск?

Проще говоря, я хочу чтобы ключ element в объекте template, мог ссылаться на ключ content в объекте template, и я мог получить доступ к его результату чтобы в дальнейшем от этого отталкиваться и таким образом переиспользовать код сделав его меньше и более гибким?

Свой результат я бы примерно хотел видеть в следующем варианте:

const main = {
    template: {
        content: document.querySelector('#template'),
        element: main.template.content.querySelector('.element')
    }
}

Answer 1

Никак. Интерпретатор не создает объекты "построчно", чтобы во время выполнения получить доступ к предыдущей строчке объекта.

Даже если просто написать:

const main = {
  element: main,
};

Уже получится ReferenceError: Cannot access 'main' before initialization. Объект должен быть полностью создан, присвоен константе, и только потом main вообще будет существовать ниже в коде.

Можно лишь сделать функцию-конструктор (или класс), чтобы выполнить примерно то, что вы хотели:

const main = {
  template: new Template('#template');
};

function Tamplate(selector) {
  this.content = document.querySelector(selector);
  this.element = this.content.querySelector('.element');
}

С некоторыми особенностями, выполняется как обычная функция: Свободно можно получить доступ к значениям предыдущих выражений. this — ссылка на создаваемый объект.

Answer 2

Как вариант можно попробовать использовать геттеры, они имеют контекст this.

const main = {
    template: {
        content: document.querySelector('#template'),
        get title() {
            return this.content.querySelector('.title');
        },
        get subTitle() {
            return this.content.querySelector('.sub__title');
        }
    }
}

main.template.subTitle.innerText = 'My updated subtitle';

console.log(main);

<div id="template">
    <h1 class="title">My Title</h1>
    <h4 class="sub__title">My subtitle</h4>
</div>

БЛОГ НА HUSL

Как создать наследование ключа в объекте от другого ключа?

Ответы (2 шт):