Методы и this в JS

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

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

const person = {
    name: 'Андрей',
    greet: function() { console.log('Привет'); }
};

Например, здесь у объекта person два ключа. Ключу name соответствует строковое значение. Ключу greet соответсвует функция, которая выводит в консоль слово «Привет» — это метод объекта person. 

 Доступ к методам объекта

Синтаксис

Вызов метода осуществляется через точку — как и вызов свойств. Только в случае метода понадобится еще указать в конце круглые скобки (). 

имяОбъекта.имяМетода()

const person = {
    name: 'Андрей',
    greet: function() { console.log('Привет'); }
};

// доступ к свойству
person.name; // Вывод: Андрей

// доступ к методу
person.greet(); // Вывод: Привет

Если вызвать метод без скобок — JavaScript сообщит описание функции.

person.greet; // Вывод: ƒ () { console.log('Привет'); }

Встроенные методы

В JavaScript много встроенных методов.

Например, встроенный метод объекта Number — parseInt. Он преобразовывает числа, записанные в string, в integer. 

let number = '23.32';
let result = parseInt(number);

console.log(result); // Вывод: 23

Как добавить метод в объект

Часто встроенных методов недостаточно, поэтому приходится создавать свои, кастомные методы. Вот, как добавить метод в объект:

// создаем объект
let student = { };

// добавляем в объект свойство name
student.name = 'Андрей';

// добавляем в объект метод greet
student.greet = function() {
    console.log('Андрей');
}

// вызываем метод
student.greet(); // Вывод: Привет

В этом примере мы сначала созадем пустой объект student, затем добавляем ему свойство name и метод greet. Как вы видите, методы добавляются так же, как и свойства.

Ключевое слово this

Чтобы получить доступ к свойству или методу объекта из метода того же объекта, необходимо использовать ключевое слово this.

Синтаксис

this.ключ

Рассмотрим на примере.

const person = {
    name: 'Андрей',
    age: 30,

    // мы получаем доступ к свойству name объекта person 
    // внутри метода greet объекта person 
    greet: function() { console.log('Привет. Меня зовут' + ' ' + this.name); }
};

person.greet();

Вывод:

Привет. Меня зовут Андрей

Сначала мы создали объект person со свойством name и методом greet.

Чтобы получить доступ к свойству name внутри метода greet того же объекта person мы использовали ключевое слово this.

Доступ к переменным внутри метода осуществляется как обычно. 

const person = {
    name: 'Андрей',
    age: 30,
    greet: function() {
        let surname = 'Карпов';
        console.log('Привет. Меня зовут' + ' ' + this.name + ' ' + surname); }
};

person.greet();

Вывод: 

Привет. Меня зовут Андрей Карпов