Объекты. Методы

Продолжаем тему объектов и сегодня на повестке дня – методы.

Что такое метод объекта?

На самом деле метод – это обычная функция. Да, ничего сверхъестественного и страшного. Обычная, особо ничем не примечательная функция, которая просто напросто находится внутри объекта и как-то связана с самим этим объектом.

Добавление метода

В прошлой статье мы рассматривали свойства объекта и создали объект котика:

const catVasya = {
   name: 'Вася',
   age: 2,
   color: 'рыжий',
   weight: 3
};

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

Чтобы он что-то научился делать нам нужно добавить в объект метод (функцию). Давай научим котика мяукать, для этого добавим в объект метод под названием mew:

const catVasya = {
   name: 'Вася',
   age: 2,
   color: 'рыжий',
   weight: 3,
   mew: function() {
      console.log('мяу-мяу');
   }
};

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

Правда, хочу заметить, что это не единственный способ определить метод внутри объекта. Очень часто ты можешь увидеть такую запись:

mew() {
  console.log('мяу-мяу');
}

Эта запись считается краткой и используется достаточно часто.

Вызов метода

Теперь у получившегося объекта мы можем вызвать данный метод как обычную функцию:

catVasya.mew();
// выведет в консоль: 'мяу-мяу'

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

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

Внутри объекта лежит свойство name, следственно, из метода sayName нам как-то нужно "достучаться" до этого свойства. Делается это просто, с помощью ключевого свойства this:

const catVasya = {
   name: 'Вася',
   age: 2,
   color: 'рыжий',
   weight: 3,
   mew: function() {
      console.log('мяу-мяу');
   },
   sayName() {
      console.log('Привет, я кот ' + this.name);
   }
};

catVasya.sayName();
// выведет в консоль: 'Привет, я кот Вася'

Здесь я специально использовал другой вариант определения метода sayName, для того, чтобы показать, что в нем ничего страшного.

Внутри этого метода мы вызываем this.name, что фактически означает: "возьми свойство name из текущего объекта". С помощью this мы можем обращаться к любым свойствам и к любым методам текущего объекта.

Именование методов

Хотелось бы заострить внимание на одном важном аспекте – именование методов.

Если свойства мы всегда называем именем существительным, то методы мы всегда называем используя глаголы. В нашем примере оба добавленных метода имеют глагол в своем названии: mew – мяукать, sayName – сказать имя.

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

Домашнее задание

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

Эти методы определить разными способами, о которых написано в статье.