Это точно так же, как объекты, которые у нас есть в реальном мире.
Когда мы работаем с JavaScript, мы фактически работаем с объектами. JavaScript — это объектно-ориентированный язык программирования, основанный на прототипах. JavaScript работает так же, как мы, люди, в нашем реальном мире.
Давайте возьмем этот пенал и узнаем об объектах на практике в этом видео.
Теперь давайте воспользуемся объектами в JavaScript.
Сначала нам нужна переменная, которая содержит данные, то есть константа, потому что постоянная переменная не изменяет данные объекта. Он постоянен каждый раз, а затем назовите его так, как вы хотите, чтобы этот контейнер был. Внутри у нас есть данные с фигурными скобками, которые определяют, что это объект.
Теперь объект может иметь некоторые свойства. Итак, свойства — это пары ключ-значение, которые находятся внутри объектов. Стоимость любого имущества может быть —
— Строка — для, например: — «Карандаша»
— Целое число — например: — 30
— Поплавок — например: — 3,8
— Boolean — например: — true
— Другой вложенный объект со своими уникальными свойствами — например: — zipLength: {
слева: 12,
справа: 12,
}
Также у нас есть методы объектов, которые мы можем использовать внутри объектов, чтобы что-то делать. Методы — это функции, которые мы вызываем для воздействия на объект.
Функции изменения свойств в объекте известны как методы.
Внутри объекта мы можем добавить столько методов, сколько захотим, а внутри методов у нас есть функция с параметром.
Позвольте мне показать вам, что я имею в виду под этим!
Когда вы работаете с объектами, вы часто видите ключевое слово «это»!
К чему это относится? — относится к текущему объекту. Здесь текущим объектом является параметр zipStatus
Когда вы утешите объект, вы увидите такой результат:
Теперь вопрос в том, как мы можем получить доступ к этим свойствам по отдельности?
Итак, есть два метода доступа к этим свойствам: -
- Обозначение точками
— Обозначение скобок
Точечную нотацию легко написать и понять, но иногда это позволяет нам делать некоторые сложные вещи, например, у нас есть переменная со значением размера, и мы хотим получить доступ к переменной, а не к значению, указанному в объекте. Вот что мы не можем сделать с точечной нотацией, и тогда нам нужно использовать скобочные обозначения.
Также мы можем изменить значение свойства, используя методы, использующие функции.
Позвольте мне показать вам, как мы пишем это —
Теперь самое интересное в объектах — создание шаблона объектов с использованием классов. Классы работают как шаблон для типа объекта, и каждый раз, когда вы создаете новый объект, этот объект автоматически получает свойства и методы. Это используется для повторного использования.
Конструктор содержит параметр, ниже которого мы определяем свойства и заполняем их.
Это карандашБокс.js, который представляет собой файл с классом, названным как карандашБокс —
Теперь нам нужно присвоить этим свойствам класса значение.
Это class.js, где мы создали новый карандашный ящик и добавили значения свойств, импортировав карандашный ящик.
У нас есть файл index.html, в который мы импортировали оба файла с модулем type. Модуль Type сообщает браузеру, что эти два файла зависят друг от друга.
И это работает так же, как мы работали с объектами раньше.
Мы можем создать столько объектов, сколько захотим, просто выполнив new PenalBox с переменной const и дав ему имя! Изменения объекта не влияют на остальные объекты. Каждый объект имеет свою уникальность.
Вы спросите меня, теперь достаточно результатов в консоли. Что, если мы хотим показать это в браузере! Давайте посмотрим, как это сделать.
У нас есть два метода для этого -
— Шаблонные литералы и конкатенация
Шаблонные литералы более предпочтительны, их легко написать и понять.
Вот как мы пишем, что ${objectName.propertyName}
а затем мы добавили эту переменную содержимого в тело, чтобы отобразить ее в браузере и DOM!
Это результат, который мы можем видеть!
Но у нас есть еще один циклический метод для отображения контента на веб-странице!
Это называется циклом for..in, который предназначен для перебора объектов.
Вы должны обязательно попробовать эти методы!
Подробный видеоурок смотрите в этой серии JavaScript на нашем канале YouTube — CroCoding
Вывод
После завершения этого руководства у вас должна быть базовая основа для кодирования на JavaScript.
Теперь вы можете попрактиковаться в создании проектов HTML, CSS и JS, чтобы обрести уверенность.
Как только вы освоитесь с JavaScript, вы можете перейти к JavaScript Framework, например к React JS.
