Elementor Header #8

42. Методы

Методы — это функции, которые являются свойствами объектов. В JavaScript методы позволяют объектам выполнять действия, связанные с этими объектами. Понимание методов позволяет лучше организовывать и структурировать код, делая объекты более функциональными и полезными.

Методы объектов: Основы

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

Пример объекта с методом:

				
					let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Привет, меня зовут " + this.name);
  }
};

person.greet(); // "Привет, меня зовут John"

				
			

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

Использование this в методах

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

Пример:

				
					let car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2019,
  getInfo: function() {
    return `${this.brand} ${this.model}, ${this.year}`;
  }
};

console.log(car.getInfo()); // "Toyota Corolla, 2019"

				
			

Здесь this.brand, this.model и this.year ссылаются на соответствующие свойства объекта car.

Сокращённая запись методов

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

				
					let person = {
  name: "John",
  age: 30,
  greet() {
    console.log("Привет, меня зовут " + this.name);
  }
};

person.greet(); // "Привет, меня зовут John"

				
			

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

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

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

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

				
					let calculator = {};

calculator.add = function(a, b) {
  return a + b;
};

console.log(calculator.add(5, 3)); // 8

				
			

Изменение метода:

				
					calculator.add = function(a, b) {
  return a + b + 10; // изменили логику метода
};

console.log(calculator.add(5, 3)); // 18

				
			

Встроенные методы объектов

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

Примеры встроенных методов:

Object.keys(obj): Возвращает массив ключей объекта obj.

				
					let person = {
  name: "John",
  age: 30
};

console.log(Object.keys(person)); // ["name", "age"]

				
			

Object.values(obj): Возвращает массив значений объекта obj.

				
					console.log(Object.values(person)); // ["John", 30]

				
			

Object.entries(obj): Возвращает массив пар [ключ, значение] для объекта obj.

				
					console.log(Object.entries(person)); // [["name", "John"], ["age", 30]]

				
			

Методы и функции: В чем разница?

Хотя методы — это функции, разница заключается в том, что методы всегда ассоциированы с объектом. Методы вызываются в контексте объекта, и в них this ссылается на этот объект, в то время как обычные функции не имеют такого контекста.

Пример функции:

				
					function sayHello() {
  console.log("Hello!");
}

sayHello(); // "Hello!"

				
			

Пример метода:

				
					let greeter = {
  greeting: "Hello",
  sayHello() {
    console.log(this.greeting + "!");
  }
};

greeter.sayHello(); // "Hello!"

				
			

Распространенные ошибки

Неправильное использование this

Если метод потеряет контекст (например, его вызовут вне объекта), this может стать undefined или указывать на глобальный объект.

				
					let person = {
  name: "John",
  greet() {
    console.log("Привет, меня зовут " + this.name);
  }
};

let greetFunction = person.greet;
greetFunction(); // "Привет, меня зовут undefined" (в строгом режиме)

				
			

Чтобы избежать этой ошибки, используйте bind, стрелочные функции, или вызывайте метод в правильном контексте.

				
					let boundGreet = person.greet.bind(person);
boundGreet(); // "Привет, меня зовут John"

				
			

Изменение метода на некорректную функцию

Если вы случайно перепишите метод функции, не сохранив его исходный функционал, объект может работать некорректно.

				
					person.greet = function() {
  console.log("Привет!");
};

person.greet(); // "Привет!" (имя не выводится)

				
			

Заключение

Методы — это важный аспект работы с объектами в JavaScript, позволяющий объектам выполнять действия и обрабатывать данные. Понимание методов и правильное использование this помогают создавать более организованный и функциональный код.

Тестовое задание

  1. Создайте объект calculator с методами add, subtract, multiply и divide, которые будут выполнять соответствующие арифметические операции.

  2. Добавьте метод clear для сброса последнего результата в calculator.

Пример решения:

				
					let calculator = {
  result: 0,

  add(a, b) {
    this.result = a + b;
    return this.result;
  },

  subtract(a, b) {
    this.result = a - b;
    return this.result;
  },

  multiply(a, b) {
    this.result = a * b;
    return this.result;
  },

  divide(a, b) {
    if (b !== 0) {
      this.result = a / b;
      return this.result;
    } else {
      console.log("Ошибка: деление на ноль");
      return undefined;
    }
  },

  clear() {
    this.result = 0;
  }
};

console.log(calculator.add(10, 5)); // 15
console.log(calculator.subtract(10, 5)); // 5
console.log(calculator.multiply(10, 5)); // 50
console.log(calculator.divide(10, 5)); // 2
calculator.clear();
console.log(calculator.result); // 0

				
			

Этот урок познакомил вас с методами объектов, их созданием и использованием. Методы позволяют объектам становиться «умными» и выполнять действия с их данными, что делает ваш код более мощным и гибким.

logo