Методы объектов и значение this в JavaScript

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

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

Следующий пример добавляет метод greet к объекту person :

let person = {
    firstName: 'John',
    lastName: 'Doe'
};
person.greet = function() {
    console.log('Hello!');
}
person.greet();

Выход:

Hello!

В этом примере:

• Во-первых, используйте функциональное выражение, чтобы определить функцию и назначить ее свойству greet объекта person.
• Затем вызовите метод greet().

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

let person = {
    firstName: 'John',
    lastName: 'Doe'
};
function greet() {
    console.log('Hello, World!');
}
person.greet = greet;
person.greet();

В этом примере:

• Во-первых, определите функцию greet() как обычную функцию.
• Во-вторых, назначьте имя функции свойству greet объекта person.
• В-третьих, вызовите метод greet().

Сокращение

JavaScript позволяет вам определять методы объекта, используя синтаксис литерала объекта, как показано в следующем примере:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    greet: function() {
        console.log('Hello, World!');
    }
};

ES6 предоставляет вам краткий синтаксис метода, который позволяет определить метод для объекта:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    greet() {
        console.log('Hello, World!');
    }
};
person.greet();

Этот синтаксис выглядит намного чище и менее многословнее.

Значение this

Как правило, методам требуется доступ к другим свойствам объекта.

Например, вы можете захотеть определить метод, который возвращает полное имя объекта человека, объединяя имя и фамилию.

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

this.propertyName

В следующем примере значение this используется в getFullName() :

let person = {
    firstName: 'John',
    lastName: 'Doe',
    greet: function() {
        console.log('Hello, World!');
    },
    getFullName: function() {
        return this.firstName + ' ' + this.lastName;
    }
};
console.log(person.getFullName());

Выход

'John Doe'