ESLint: Expected 'this' to be used by class method 'getTimeParts'.(class-methods-use-this)

Question

ESLint ругается на отсутствие 'this' в методе 'getTimeParts'. Как можно исправить код в нужный формат?


    class DigitalClock {
          constructor(element) {
            this.element = element;
          }
        
          start() {
            this.update();
        
            setInterval(() => {
              this.update();
            }, 500);
          }
        
          update() {
            const parts = this.getTimeParts();
            const minuteFormatted = parts.minute.toString().padStart(2, '0');
            const timeFormatted = `${parts.hour}:${minuteFormatted}`;
            const amPm = parts.isAm ? 'AM' : 'PM';
        
            this.element.querySelector('.clock-time').textContent = timeFormatted;
            this.element.querySelector('.clock-ampm').textContent = amPm;
          }
        
          getTimeParts() {
            const now = new Date();
        
            return {
              hour: now.getHours() % 12 || 12,
              minute: now.getMinutes(),
              isAm: now.getHours() < 12,
            };
          }
        }
        
        const clockElement = document.querySelector('.clock');
        const clockObject = new DigitalClock(clockElement);
        
        clockObject.start();

Answer 1

Объявленый метод getTimeParts() не обращается к экземпляру класса с использованием ключевого слова this, поэтому ESLint считает (достаточно логично), что эта функция могла бы быть размещена и вне объявления класса. Ведь она не потребляет и не преобразовывает какие-либо свойcтва объекта, методом которого она должна являться.

Казалось бы объявление метода с ключевым словом static решает проблему, но теперь из самого экземпляра класса - объекта - доступа к этому методу не будет. Обращаться к нему можно только DigitalClock.getTimeParts() - как к методу самого класса как функции.

Если убрать синтаксис class, то ваш код можно переделать следующим образом. И здесь хорошо видно, что статический метод - это просто свойство функции-конструктора (функция является объектом, а объекту можно добавлять свойства). Поэтому и в DigitalClock.prototype.update() идет обращение к DigitalClock.getTimeParts() , а не к this.getTimeParts().

function DigitalClock(element) {
    this.element = element;
}

DigitalClock.prototype.start = function(){
    this.update();

    setInterval(() => {
    this.update();
    }, 500);
};

DigitalClock.prototype.update = function(){
    const parts = DigitalClock.getTimeParts();
    const minuteFormatted = parts.minute.toString().padStart(2, '0');
    const timeFormatted = `${parts.hour}:${minuteFormatted}`;
    const amPm = parts.isAm ? 'AM' : 'PM';

    this.element.querySelector('.clock-time').textContent = timeFormatted;
    this.element.querySelector('.clock-ampm').textContent = amPm;
}

DigitalClock.getTimeParts = function(){
    const now = new Date();

    return {
    hour: now.getHours() % 12 || 12,
    minute: now.getMinutes(),
    isAm: now.getHours() < 12,
    };
}

const clockElement = document.querySelector('.clock');
const clockObject = new DigitalClock(clockElement);

clockObject.start();

<div class="clock">
    <div class="clock-time"></div>
    <div class="clock-ampm"></div>
  
</div>

В целом, необращение к this внутри метода класса не является ошибкой. Отчасти, это можно считать логическим недоразумением - не больше. Код будет работать.

БЛОГ НА HUSL

ESLint: Expected 'this' to be used by class method 'getTimeParts'.(class-methods-use-this)

Ответы (1 шт):