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

JavaScript простым языком

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

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

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

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

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 – назвать имя.

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

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

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

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