В этой статье мы собираемся узнать базовые знания о том, что такое объект. Проведем аналогию с предметом и попробуем воспринимать его как комнату.
Содержание:
- Объект
- Аналогия
- Функция в объекте
- Доступ к свойствам
- Назначение свойств
- Добавление новых свойств и методов
- Заключение
Объект
- — это один из типов данных в JavaScript. Объекты позволяют описать и сгруппировать характеристики сущности: пользователя, книги, товара в магазине и т.п. Объект можно создать:
- с парой фигурных скобок {…} — с использованием инициализатора объекта (это разделенный запятыми список пар имен свойств и значений связанных объектов, заключенных в фигурные скобки);
- с помощью оператора new;
- используя Object.create();
//with the cury brackets 1)const employee = { name: "Matthew", skill: "attorney", printIntroduction: function () { console.log(`My name is ${this.name}.My qualification is ${this.skill}`); }, }; //new operator 2)function Employee(name, skill){ this.name = name; this.skill = skill; this.printIntroduction = function () { console.log(`My name is ${this.name}.My qualification is ${this.skill}`); }; } const me = new Employee("Matthew", "attorney"); //the Object.create() 3)const employee = { skill: "", printIntroduction: function () { console.log(`My name is ${this.name}.My qualification is ${this.skill}`); }, }; const me = Object.create(employee); me.name = "Matthew"; me.skill = "attorney";
Аналогия
Я хочу создать объект, который мы будем использовать для нашей аналогии, используя пару фигурных скобок. Как я уже упоминал ранее, мы попробуем представить, что наш объект — это комната. Итак, в комнате изначально есть зеленые стены и несколько стульев. Мы также можем изменить цвет стены. Давайте посмотрим:
const livingRoom = { wallColor: "green", chairs: 4, changeWallColor(newColor) { livingRoom.wallColor = newColor; }, };
livingRoom — это имя переменной, которой назначен наш объект. Это также имя нашего объекта. Внутри фигурных скобок мы определяем свойства объекта и их начальные значения. Это очень типичный пример создания объекта.
Имя переменной должно отражать назначение переменной в контексте вашего кода:
const user = { name: "John", age: 30 }; //The variable "user" represents user data. const carModel = "Toyota"; ///Variable represents the car model name.
Давайте вернемся к примеру с гостиной. Мы связываем наш объект с комнатой. Комната может быть пустой или содержать предметы. Аналогично объект может быть пустым или содержать данные. Данные объекта называются свойствами. Они записываются парами в формате ключ:значение (имя_свойства:_значение_свойства). В нашем случае свойства таковы:
1)Цвет стены: «зеленый»,
2) стульев: 4
wallColor и Chairs — это ключи, «зеленый» и 4 — ключевые значения. У любого объекта может быть 0 или более свойств и методов (о методах см. в следующем разделе).
имя свойства(ключ) можно записать двумя способами:
- произвольная строка, заключенная в кавычки: «имя», «навыки»;
const person = { "name": "John", "skills": ["JavaScript", "HTML", "CSS"] };
- без кавычек: имя без пробелов, начинается с буквы или символов, например подчеркивания (_) или знака доллара ($): _productName, $priceUSD.
const product = { _productName: "Widget", // Starts with an underscore $priceUSD: 19.99 // Starts with an sign ($) };
Значением свойства может быть любой тип данных, доступный в JavaScript: строка («Виджет»), число (19,99), логическое значение, массив, функция и даже объект. Они пишутся через запятую.
Мы можем думать о свойствах объекта как об элементах комнаты. имя элемента — это ключ, а цветили количество – это значение.
Функция в объекте
- функции в объекте — это его методы. По аналогии с комнатой методы — это действия, доступные в комнате. В нашем случае методом является функция ChangeWallColor(). Мы написали это в сжатой форме. Можете написать полную версию. Это просто другой синтаксис, но метод тот же:
changeWallColor: function(newColor) { this.wallColor = newColor; },
2. внутри метода выполняем операцию перезаписи цвета:
this.wallColor = новыйЦвет;
newColor — ваш случайный цвет, который вы хотите. Мы используем ключевое слово this, чтобы изменить значение свойства непосредственно на этом объекте.
Итак, давайте рассмотрим объект как комнату и сравним их:
Доступ к свойствам
Мы используем свойства для хранения информации и методы для обработки этой информации. Доступ к свойствам объекта предпочтительно осуществляется с помощью файла . оператор ИмяОбъекта.Ключсвойства:
livingRoom.wallColor, livingRoom.changeColor
или через квадратные скобки имя_объекта['свойство']):
livingRoom['wallColor'], livingRoom['chairs']
Метод объекта доступ тот же: livingRoom.changeColor
Но когда мы вызываемметод (если мы хотим выполнить описанное действие в методе (в нашем случае это изменение цвета), мы используем круглые скобки и аргумент, ожидаемый методом: livingRoom.changeColor(“blue”) .
Назначение свойств (Изменение значения свойства объекта)
- Значение изменяется путем присвоения нового значения свойству. Например, чтобы изменить количество стульев в объекте, мы будем обращаться к свойству по имени (ключу) и менять его значение с помощью знака равенства.
livingRoom.chairs = 5; console.log(livingRoom.chairs); //5
Было 4 стула, после назначения их стало 5.
Если свойство Chairs еще не существует (см. следующий раздел), этот оператор создаст новое свойство с таким именем. и присвойте ему значение. Но оно уже существует, так что этому утверждению переприсвоят свое значение.
2. Изменение значения задается ссылкой. На самом деле это из-за того, как работает JS. Когда вы создаете объект, JS создает для него определенный участок памяти, и вы фактически работаете с информацией о том, как найти этот объект в памяти.
Это похоже на то, что у вас есть список комнат, и если вы хотите скопировать данные из LivingRoom в другую, вы просто говорите newRoom = LivingRoom. А затем вы ищете запись данных гостиной комнаты (кусок памяти) и работаете с этой информацией. Если вы измените что-то в newRoom, вы также измените и гостиную, потому что она работает по ссылке.
let newRoom = livingRoom console.log(livingRoom.chairs); //5 console.log(newRoom.chairs); //5 newRoom.chairs = 2 console.log(livingRoom.chairs); //2 console.log(newRoom.chairs); //2
Даже если мы передадим объект в качестве аргумента функции и изменим свойства внутри него, эти изменения будут видны за пределами функции, поскольку вы работаете с тем же объектом, а не с его копией (помните: с reference):
function changeProperty(obj, quantity) { obj.chairs = quantity; } console.log("Initial property:", livingRoom.chairs); //2 we got from the previous example changeProperty(livingRoom, 8); console.log("Property after change:", livingRoom.chairs);//8
Добавление новых свойств и методов
Операция добавления новых свойств и методов аналогична операции изменения значения свойства.
//adding new property livingRoom.bookShelf = [], console.log(livingRoom.bookShelf); //[] //adding a method: livingRoom.addBook = function addBook(book){ this.bookShelf.push(book) },
Раньше у нас не было свойства bookShelf, но мы добавили его с помощью операции присваивания: objectName.propertyName = «новое значение».
То же самое и с методом. Мы создали его с помощью операции присваивания.
Я рассмотрел основы, которые вам нужно знать об объекте. Если вы хотите ознакомиться подробнее, перейдите по ссылкам:
- Объект — JavaScript | МДН;
- Объекты — javascript.info;
- Вы еще не знаете JS: Объекты и классы — 2-е издание (Object Foundations);
- Вы еще не знаете JS: Объекты и классы — 2-е издание (Как работают объекты)
Вывод:
- объект — это тип данных на языке программирования JavaScript;
- объект создается тремя способами:
- Объект.создать();
- новый оператор;
- фигурные скобки;
3. объект имеет свойства, которые записываются в виде пар ключ:значение.
(Цвет стены: «зеленый»);
4. функции в объекте являются его методами;
5. В объекте могут храниться данные любого типа.
Слава Украине!💛💙