Можно ли в поле класса записать функцию?

Да, в поле класса можно и даже нужно записывать функции

Разница между полем-функцией и методом

В JavaScript (и TypeScript) между полем-функцией и традиционным методом класса есть важные технические отличия:

class User {
  // Традиционный метод класса (Method)
  greetMethod() {
    console.log(`Привет, я ${this.name}`);
  }

  // Поле-функция (Field function / Property method)
  greetField = function() {
    console.log(`Привет, я ${this.name}`);
  }

  // Поле-стрелочная функция (Arrow function field)
  greetArrow = () => {
    console.log(`Привет, я ${this.name}`);
  }

  constructor(name) {
    this.name = name;
  }
}

Ключевые различия

1. Время инициализации

• Методы класса создаются один раз при определении класса в его прототипе
• Поля-функции создаются для каждого экземпляра отдельно при вызове конструктора

2. Поведение this

• В традиционных методах this динамически привязывается к контексту вызова
• В полях-стрелочных функциях this статически привязан к экземпляру класса

const user = new User('Анна');

const method = user.greetMethod;
const field = user.greetField;
const arrow = user.greetArrow;

method(); // Ошибка: this.name undefined (потеря контекста)
field();  // Ошибка: this.name undefined (потеря контекста)
arrow();  // Работает: "Привет, я Анна" (контекст сохранен)

3. Производительность и память

class WithMethods {
  method() {} // Один экземпляр в прототипе
}

class WithFields {
  field = function() {} // Новый экземпляр для каждого объекта
}

// Для 1000 объектов:
// WithMethods: 1 функция в памяти
// WithFields: 1000 функций в памяти

Практические примеры использования

React компоненты с полями-стрелочными функциями

class Counter extends React.Component {
  state = { count: 0 };
  
  // Стрелочная функция как поле - контекст не теряется
  handleClick = () => {
    this.setState(prev => ({ count: prev.count + 1 }));
  };
  
  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}

Декораторы и мемоизация

class ApiService {
  // Мемоизация результатов вызова
  cachedData = null;
  
  fetchData = async () => {
    if (!this.cachedData) {
      this.cachedData = await this.makeRequest();
    }
    return this.cachedData;
  };
  
  // Автопривязка обработчиков событий
  handleEvent = (event) => {
    console.log('Событие:', event.type);
    this.processEvent(event);
  };
}

Рекомендации по использованию

Когда использовать поля-функции:

• Обработчики событий в UI-библиотеках (React, Vue классы)
• Колбэки, которые передаются в сторонние библиотеки
• Автопривязка контекста для предотвращения потери this
• Мемоизированные функции, специфичные для экземпляра

Когда предпочесть традиционные методы:

• Основная бизнес-логика класса
• Функции, вызываемые внутри класса другими методами
• Когда важна экономия памяти (много экземпляров)
• Методы, которые могут использоваться через прототипное наследование

Особенности в TypeScript

class Calculator {
  // Явная аннотация типа для поля-функции
  add: (a: number, b: number) => number = (a, b) => {
    return a + b;
  };
  
  // Объявление и реализация раздельно
  multiply?: (a: number, b: number) => number;
  
  constructor() {
    this.multiply = (a, b) => a * b;
  }
}

Заключение

Поля-функции в классах — это мощный инструмент современного JavaScript, который решает конкретные проблемы, связанные с привязкой контекста и инкапсуляцией логики. Однако их следует использовать обдуманно, учитывая:

• Издержки памяти (создание новой функции для каждого экземпляра)
• Особенности наследования (поля не копируются в прототип)
• Семантику кода (что является поведением объекта, а что — его данными)

Правильный выбор между полем-функцией и традиционным методом зависит от конкретной задачи и требований к производительности приложения.