#10 Объекты в Javascript

В этом видео мы с вами разберем обьекты. Представьте себе, что мы хотим создать игру и в нашей игре будут орки. Что нужно чтобы создать базового орка? Нам нужно например задать его цвет, рост и вес. И если мы будем создавать для этого переменные, то это будет выглядеть как-то так

var color = 'green'
var height = 5
var weight = 180

и это не особо нам показывает, что это орк. Потому что это 3 независимые друг от друга переменные. Мы бы могли создать обьект, который содержал бы в себе эти три переменные.

var orc = {
  color: 'green',
  height: 5,
  weight: 180
}

Как вы видите, мы с вами создали обьект орк и записали в него эти переменные. Теперь мы точно знаем, что они относятся к сущности орк. То есть мы используем обьекты, чтобы хранить вместе переменные, которые имеют что-то общее.

Для создания обьектов используется специальный синтаксис: фигурные скобки. И каждое значение внутри фигурных скобок пишется как ключ слева от двоеточия, а значение справа. И каждая такая пара разделяется запятой. Эта пара называется свойством обьекта или полем обьекта.

Как же нам теперь получить доступ к свойствам обьекта? С помощью точки и названия свойства

document.write(orc.color)

То есть точка разделяет название обьект и его свойство

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

И выглядело бы это так

var orc = ['green', 5, 180]

Но главное отличие массивов от обьектов, это то, что в массивах мы получаем значения по индексу (0,1,2), а в обьектах по ключу. И запись

document.write(orc.color)

намного более наглядная, чем

document.write(orc[0])

То есть обьекты намного легче использовать если вы хотите хранить разные типы данных, как например в нашем случае. Массивы плохо подходят для хранения разных типов данных. Потому что тогда нам не так важно иметь имя, чтобы иметь удобный доступ к свойствам, как в обьектах.

Теперь следующий пункт: Обьекты могут содержать также и функции внутри. И в реальном мире так и происходит. Наш орк может атаковать или бегать. И функции в обьектах нужны, чтобы описывать действия, которые делает этот обьект

И выглядит это так

var orc = {
  color: 'green',
  height: 5,
  weight: 180,
  attack: function () {
    document.write('Orc attacks!')
  }
}

Как вы видите, мы просто написали обычную функцию внутрь обьекта. И указали этой функции ключ, чтобы мы могли к ней обратиться. Единственное отличие, что в обычной функции мы писали

function attack () {}

а здесь у нас есть ключ, а имени у функции нет.

Теперь мы можем вызвать эту функцию внутри обьекта точно так же с помощью точки.

orc.attack()

И если мы посмотрим в браузер, то у нас выведется наше сообщение.

Теперь давайте посмотрим на наш код document.write, который мы писали много раз и задумаемся. Мы используем такой же синтаксис, как в нашем обьекте. Получается, что document - это тоже обьект и у него внутри есть функция write.

Как же обновить что-то в нашем обьекте? Точно так же как и с обычной переменной, но в этом случае мы обращаемся к свойству обьекта

orc.color = 'black'

и это перезапишет значение свойста color

document.write(orc.color)

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.