В этой статье мы собираемся узнать базовые знания о том, что такое объект. Проведем аналогию с предметом и попробуем воспринимать его как комнату.

Содержание:

  1. Объект
  2. Аналогия
  3. Функция в объекте
  4. Доступ к свойствам
  5. Назначение свойств
  6. Добавление новых свойств и методов
  7. Заключение

Объект

  • — это один из типов данных в JavaScript. Объекты позволяют описать и сгруппировать характеристики сущности: пользователя, книги, товара в магазине и т.п. Объект можно создать:
  1. с парой фигурных скобок {…} — с использованием инициализатора объекта (это разделенный запятыми список пар имен свойств и значений связанных объектов, заключенных в фигурные скобки);
  2. с помощью оператора new;
  3. используя 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), логическое значение, массив, функция и даже объект. Они пишутся через запятую.

Мы можем думать о свойствах объекта как об элементах комнаты. имя элемента — это ключ, а цветили количество – это значение.

Функция в объекте

  1. функции в объекте — это его методы. По аналогии с комнатой методы — это действия, доступные в комнате. В нашем случае методом является функция 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”) .

Назначение свойств (Изменение значения свойства объекта)

  1. Значение изменяется путем присвоения нового значения свойству. Например, чтобы изменить количество стульев в объекте, мы будем обращаться к свойству по имени (ключу) и менять его значение с помощью знака равенства.
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 = «новое значение».

То же самое и с методом. Мы создали его с помощью операции присваивания.

Я рассмотрел основы, которые вам нужно знать об объекте. Если вы хотите ознакомиться подробнее, перейдите по ссылкам:

  1. Объект — JavaScript | МДН;
  2. Объекты — javascript.info;
  3. Вы еще не знаете JS: Объекты и классы — 2-е издание (Object Foundations);
  4. Вы еще не знаете JS: Объекты и классы — 2-е издание (Как работают объекты)

Вывод:

  1. объект — это тип данных на языке программирования JavaScript;
  2. объект создается тремя способами:

3. объект имеет свойства, которые записываются в виде пар ключ:значение.

(Цвет стены: «зеленый»);

4. функции в объекте являются его методами;

5. В объекте могут храниться данные любого типа.

Слава Украине!💛💙