Главная страница » JavaScript » 45. Цепочка вызовов

45. Цепочка вызовов

Цепочка вызовов (method chaining) — это техника, которая позволяет вызывать несколько методов последовательно на одном объекте. Каждый метод в цепочке возвращает объект, на котором можно вызвать следующий метод. Это помогает писать более компактный и читаемый код.

Цепочка вызовов широко используется в JavaScript, особенно в библиотеках и фреймворках, таких как jQuery, Lodash и многих других.

Основы цепочки вызовов

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

				
					let str = "  Hello, World!  ";

let result = str.trim().toUpperCase().slice(0, 5);

console.log(result); // "HELLO"

Здесь метод trim() удаляет пробелы в начале и конце строки, метод toUpperCase() переводит строку в верхний регистр, а метод slice(0, 5) извлекает первые пять символов. Все эти методы возвращают строку, поэтому их можно цепочкой вызывать последовательно.

Цепочка вызовов в объектах

Цепочки вызовов часто используются в объектах и конструкторах. Вот пример с простым объектом:

				
					let car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2020,
  start: function() {
    console.log("Engine started");
    return this;
  },
  drive: function() {
    console.log("Car is driving");
    return this;
  },
  stop: function() {
    console.log("Engine stopped");
    return this;
  }
};

// Цепочка вызовов
car.start().drive().stop();

В этом примере каждый метод объекта car возвращает сам объект (this), что позволяет вызывать их последовательно.

Создание методов для цепочки вызовов

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

				
					function Calculator(value = 0) {
  this.value = value;

  this.add = function(number) {
    this.value += number;
    return this; // Возвращаем объект для цепочки вызовов
  };

  this.subtract = function(number) {
    this.value -= number;
    return this;
  };

  this.multiply = function(number) {
    this.value *= number;
    return this;
  };

  this.divide = function(number) {
    this.value /= number;
    return this;
  };

  this.result = function() {
    return this.value;
  };
}

// Использование цепочки вызовов
let calc = new Calculator();
let finalValue = calc.add(10).subtract(5).multiply(2).divide(3).result();

console.log(finalValue); // 3.3333333333333335

В этом примере методы add, subtract, multiply и divide возвращают объект Calculator, что позволяет вызывать их цепочкой.

Преимущества цепочки вызовов

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

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

Методы, не возвращающие объект: Если метод в цепочке вызовов не возвращает объект, на котором был вызван, цепочка прерывается. Это приведёт к ошибке, если вы попытаетесь вызвать следующий метод.

Пример ошибки:

				
					car.start().drive().model(); // Ошибка, так как model не является методом

Вызов методов на undefined или null: Если в процессе цепочки вызовов объект становится undefined или null, это приведёт к ошибке.

Пример ошибки:

				
					let obj = null;
obj.method().anotherMethod(); // Ошибка: Cannot read property 'method' of null

Неправильное использование this: Если метод возвращает не this, а другой объект или значение, цепочка вызовов прервётся.

Пример ошибки:

				
					this.someMethod = function() {
  return someOtherObject; // Возвращает не текущий объект
};

Заключение

Цепочка вызовов — это мощный инструмент для создания более компактного и читаемого кода в JavaScript. Правильное использование этой техники может значительно упростить работу с объектами и методами, особенно в сложных приложениях. Однако важно помнить, что для успешной реализации цепочки вызовов методы должны возвращать текущий объект (this), чтобы цепочка могла продолжаться.

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

Создайте объект Book с методами setTitle, setAuthor, setYear и getInfo. Методы setTitle, setAuthor и setYear должны поддерживать цепочку вызовов.
Вызовите методы в цепочке и выведите информацию о книге с помощью getInfo.

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

				
					function Book() {
  this.title = "";
  this.author = "";
  this.year = 0;

  this.setTitle = function(title) {
    this.title = title;
    return this;
  };

  this.setAuthor = function(author) {
    this.author = author;
    return this;
  };

  this.setYear = function(year) {
    this.year = year;
    return this;
  };

  this.getInfo = function() {
    return `${this.title} by ${this.author}, published in ${this.year}`;
  };
}

// Использование цепочки вызовов
let bookInfo = new Book()
  .setTitle("JavaScript: The Good Parts")
  .setAuthor("Douglas Crockford")
  .setYear(2008)
  .getInfo();

console.log(bookInfo); // "JavaScript: The Good Parts by Douglas Crockford, published in 2008"

Этот урок научил вас, как использовать цепочки вызовов для упрощения и улучшения кода в JavaScript. Этот подход широко применяется и позволяет эффективно работать с методами и объектами.

Регистрация

Вход

Поиск

45. Цепочка вызовов

Основы цепочки вызовов

Цепочка вызовов в объектах

Создание методов для цепочки вызовов

Преимущества цепочки вызовов

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

Заключение

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