Понимание объектов и работа с ними - важная часть JavaScript, потому что почти все в JavaScript основано на объектах.
Сначала мы рассмотрим теоретическую часть, где я объясню разницу между классовыми и объектно-ориентированными языками программирования, а затем мы рассмотрим практическую часть о том, как в основном работать с объектами.
Теоретическая часть
Если вы работали с такими языками, как Java или PHP, вы уже знаете, что такое язык программирования на основе классов.
В языках на основе классов вы инкапсулируете свою логику в классы, эти классы являются схемами для экземпляров объектов, которые вы создаете из них.
Слева вы видите простой пользовательский класс. Это план для ваших пользовательских объектов. Поле имени является частным и доступно только через методы.
В объектно-ориентированном языке, таком как JavaScript, экземпляр объекта создается из других объектов. Унаследованный вами объект является так называемым прототипом вашего нового объекта. Вот пример:
const user = { name: 'leo' }; const adminUser = Object.create(user); adminUser.age = 33; console.dir(adminUser);
Вы можете попробовать запустить код, например, на codepen.io и открыть консоль dev-tools. Вы можете увидеть подробности ниже. Ваш недавно созданный объект adminUser показан с его прототипной (унаследованной) структурой.
Прототипы - это абстракция созданных объектов. В нашем простом примере выше у нас есть две абстракции: предварительная сборка Object.protoytpe и наш объект user.
Объекты могут содержать простые свойства примитивного типа, вы также можете определять подобъекты или функции.
const user = { calculateSum: function (operand1, operand2) { return operand1 + operand2; }, address: { street: '', city: '' } }; const adminUser = Object.create(user); console.dir(adminUser);
Каждый новый объект основан на Object.prototype, если вы не укажете свой собственный прототип, как мы сделали для объекта adminUser, или не установили для прототипа значение null.
const adminUser = Object.create(null); adminUser.age = 33; console.dir(adminUser);
Вывод на нашей консоли выглядит очень коротким для этого примера, потому что мы установили унаследованный прототип равным null, поэтому наш объект получает только свойство age и ничего больше.
Практическая часть
Как получить объект в собственность?
Первый вариант - написать имя свойства, разделенное точкой на объекте.
const name = adminUser.name; console.log(name); // outputs: > "leo"
Во-вторых, с квадратными скобками, имеет смысл предпочесть этот способ только в том случае, если вам нужно получить свойство динамически.
const propertyName = "age"; // set by a condition const age = adminUser[propertyName]; console.log(age); // outputs: > 33
Мы обращаемся к функции в приведенном ниже коде и передаем два аргумента.
const sum = adminUser.calculateSum(3, 3); // toString() is a built in function of Object.prototype console.log(sum.toString()); // outputs: > "6"
Сокращенный код для проверки доступности всех свойств во время выполнения для назначения. Если вы создаете объекты динамически вместе, вы должны предотвращать ошибки, проверяя свойства.
const user = {}; const userName = user && user.details && user.details.name; console.log(userName); // outputs: > undefined
Как вариант, вы можете использовать новую функцию дополнительный оператор цепочки.
const user = {}; const userName = user?.details?.name; console.log(userName); // outputs: > undefined
Я ценю ваш отзыв. Не стесняйтесь начинать разговор и оставлять комментарии. :)
Больше контента на plainenglish.io