Может ли свойство объекта ссылаться на другое свойство этого объекта

143
26 сентября 2019, 06:40

у меня вопрос к знатокам :) Я пытаюсь сделать динамически генерируемое "дерево решений". Данные которые нужны хранятся в глобальной переменной

const mainObj = { 
  second: { 
    name: 'second', 
    valueToOutput: "someString", 
  }, 
   
  third: { 
    name: 'third', 
    valueToOutput: "someString", 
  }, 
   
  first: { 
    name: 'first', 
    nextEls: [second, third] 
  } 
}

При инициализации переменной сразу же выхватываю ошибку Uncaught ReferenceError: second is not defined, пробую инициировать через this

const mainObj = { 
  second: { 
    name: 'second', 
    valueToOutput: "someString", 
  }, 
   
  third: { 
    name: 'third', 
    valueToOutput: "someString", 
  }, 
   
  first: { 
    name: 'first', 
    nextEls: [this.second, this.third] 
  } 
}

переменная инициируется. Но получаю такой объект по итогу

first: { name: 'first', nextEls: [undefined, undefined] }

в этом и заключается суть проблемы - можно ли в свойствах ссылаться на свойства? И если да, то как это лучше реализовать?

Answer 1

Достаточно хранить имена следующих элементов:

const mainObj = { 
  second: { 
    name: 'second', 
    valueToOutput: "someString", 
  }, 
 
  third: { 
    name: 'third', 
    valueToOutput: "someString", 
  }, 
 
  first: { 
    name: 'first', 
    nextEls: ['second', 'third'] 
  } 
}

Обращение к самому свойству становится тривиальным.

Answer 2

Лучше ничего сразу же не хардкодить. Создайте пустой объект, затем последовательно его заполните:

const mainObj = {};
mainObj.second = {
    name: 'second',   
    valueToOutput: "someString"
}
mainObj.third = {
    name: 'third',   
    valueToOutput: "someString"
}
mainObj.first = {
    name: 'first',   
    nextEls: [mainObj.second, mainObj.third]
}
Answer 3

Суть проблемы - во время создания объекта mainObj и его подобъекта first (то есть во время выполнения кода, возвращающего значения для свойств этих объектов), этих объектов еще нет.

function createMainObj() { 
  var result = { 
    second: { 
      name: 'second', 
      valueToOutput: "someString", 
    }, 
 
    third: { 
      name: 'third', 
      valueToOutput: "someString", 
    }, 
 
    first: { 
      name: 'first', 
      nextEls: [] 
    } 
  }; 
  result.first.nextEls.push(result.second); 
  result.first.nextEls.push(result.third); 
  return result; 
} 
 
const mainObj = createMainObj(); 
console.log(mainObj.first);

Answer 4

Вы можете использовать геттеры вместе с this, так как this актуально только для вызова методов, а не свойств. Но в геттерах этот способ будет иметь доступ только к тому же уровню вложенности (в вашем примере this относилось бы к объекту mainObj.first, если бы это было возможно):

const mainObj = {
  second: 2,
  third: 3,
  get others() { return [this.second, this.third]; }
}
console.log(mainObj.others);
[ 2, 3 ]
Answer 5

Это лучше просто разбить на два действия:

const mainObj = {
  second: {
    name: 'second',
    valueToOutput: "someString",
  },
  third: {
    name: 'third',
    valueToOutput: "someString",
  },
}
mainObj.first = {
   name: 'first',
   nextEls: [mainObj.second, mainObj.third]
}

this лучше не использовать, так как во вложенных массивах/объектах контекст просто теряется. А вообще для таких случаев лучше использовать классы с конструктором: https://learn.javascript.ru/es-class

READ ALSO
Почему webpack выводит ошибки eslint несколько раз?

Почему webpack выводит ошибки eslint несколько раз?

Добавил в конфиге webpack, проверку esLint

145
Получение открытых вкладок браузера Chrome

Получение открытых вкладок браузера Chrome

Есть расширение хрома с backgroun страницейУ человека в браузере открыто пару вкладок

115
Анимация модального окна [закрыт]

Анимация модального окна [закрыт]

как сделать анимацию модального окна,что он выползла с левой границы экрана

144
выпадающий список на jQuery с checkBox

выпадающий список на jQuery с checkBox

Помогите реализовать идею, второй день бьюсьНужно реализовать выпадающий список из checkbox и при выборе, значения должно отображаться в input,...

165