Почему получаю ошибку TypeError: this.x is not a function?

Question

[tostershmoster]

Исходный работающий код

// плагин "paginationjs": "^2.1.5"

function simpleTemplating(rooms) {
  let html = '';
  $.each(rooms, (index, room) => {
    const locals = {
      room,
    };
    html += roomCard(locals);
  });
  return html;
}

function initPagination() {
  const pSize = 12;
  const container = $('.js-pagination-container');

  const config = {
    dataSource: data,
    pageSize: pSize,
    pageNumber: 1,
    pageRange: 1,
    locator: 'rooms',
    autoHidePrevious: true,
    autoHideNext: true,
    prevText: '',
    nextText: '',
    footer: (currentPage) => initFooter(currentPage, pSize),
    callback(rooms) {
      const html = simpleTemplating(rooms);
      $('.search-room-room-cards__grid-layout').html(html);
    },
  };

переношу в класс

_simpleTemplating(rooms) {
  let html = '';
  $.each(rooms, (index, room) => {
    const locals = {
      room,
    };
    html += roomCard(locals);
  });
  return html;
}

_initPagination() {
  const pSize = 12;
  const container = $('.js-pagination-container');

  const config = {
    dataSource: data,
    pageSize: pSize,
    pageNumber: 1,
    pageRange: 1,
    locator: 'rooms',
    autoHidePrevious: true,
    autoHideNext: true,
    prevText: '',
    nextText: '',
    footer: (currentPage) => this._initFooter(currentPage, pSize),
    callback(rooms) {
      const html = this._simpleTemplating(rooms); // Error
      $('.search-room-room-cards__grid-layout').html(html);
    },
  };

  container.pagination(config);
  container.addHook('afterPaging', this._initSlickSlider);
}

на строке

const html = this._simpleTemplating(rooms);

получаю ошибку

Uncaught TypeError: this._simpleTemplating is not a function

Полный код
было

function simpleTemplating(rooms) {
  let html = '';
  $.each(rooms, (index, room) => {
    const locals = {
      room,
    };
    html += roomCard(locals);
  });
  return html;
}

function initSlickSlider() {
  $('.js-slick-picture').slick({
    dots: true,
  });
}

function initFooter(currentPage, pSize) {
  const pageSize = pSize;
  const prevPage = currentPage - 1;
  let fromPage;
  const toPage = currentPage * pageSize;

  if (currentPage === 1) {
    fromPage = currentPage;
  } else {
    fromPage = prevPage * pageSize + 1;
  }
  return `<div class = paginationjs-pages-footer>${fromPage} - ${toPage} из 100+ вариантов аренды</div>`;
}

function initPagination() {
  const pSize = 12;
  const container = $('.js-pagination-container');

  const config = {
    dataSource: data,
    pageSize: pSize,
    pageNumber: 1,
    pageRange: 1,
    locator: 'rooms',
    autoHidePrevious: true,
    autoHideNext: true,
    prevText: '',
    nextText: '',
    footer: (currentPage) => initFooter(currentPage, pSize),
    callback(rooms) {
      const html = simpleTemplating(rooms);
      $('.search-room-room-cards__grid-layout').html(html);
    },
  };

  container.pagination(config);
  container.addHook('afterPaging', initSlickSlider);
}

window.addEventListener('DOMContentLoaded', () => {
  initPagination();
  initSlickSlider();
});

стало

class Pagination {
  constructor() {
    this._addListeners();
    this._simpleTemplating = this._simpleTemplating.bind(this);
  }

  _addListeners() {
    window.addEventListener('DOMContentLoaded', () => {
      this._initPagination();
      this._initSlickSlider();
    });
  }

  _initPagination() {
    const pSize = 12;
    const container = $('.js-pagination-container');

    const config = {
      dataSource: data,
      pageSize: pSize,
      pageNumber: 1,
      pageRange: 1,
      locator: 'rooms',
      autoHidePrevious: true,
      autoHideNext: true,
      prevText: '',
      nextText: '',
      footer: (currentPage) => this._initFooter(currentPage, pSize),
      callback(rooms) {
        const html = this._simpleTemplating(rooms);  // Error
        $('.search-room-room-cards__grid-layout').html(html);
      },
    };

    container.pagination(config);
    container.addHook('afterPaging', this._initSlickSlider);
  }

  _initSlickSlider() {
    $('.js-slick-picture').slick({
      dots: true,
    });
  }

  _initFooter(currentPage, pSize) {
    const pageSize = pSize;
    const prevPage = currentPage - 1;
    let fromPage;
    const toPage = currentPage * pageSize;

    if (currentPage === 1) {
      fromPage = currentPage;
    } else {
      fromPage = prevPage * pageSize + 1;
    }
    return `<div class = paginationjs-pages-footer>${fromPage} - ${toPage} из 100+ вариантов аренды</div>`;
  }

  _simpleTemplating(rooms) {
    let html = '';
    $.each(rooms, (index, room) => {
      const locals = {
        room,
      };
      html += roomCard(locals);
    });
    return html;
  }
}

export default Pagination;

Answer 1

[RAX7]

- callback(rooms) {
+ callback: (rooms) => {

Comments

[tostershmoster]

Примерно в этом направлении и думал. Только не понятно почему функция заменяется на свойство: значение? Я пробовал как то так callback = (rooms) =>

[RAX7]

tostershmoster,
https://learn.javascript.ru/object-methods#u-strel...

[tostershmoster]

RAX7, Я не про this, a про то что callback(rooms) { это была просто функция в объекте, а тут вдруг сталa ключом callback: со значением (rooms) => {

Получается js автоматически разворачивает callback(rooms) { ... в callback: callback(rooms) { ... ?

[RAX7]

tostershmoster, вся проблема как раз таки в this. Почитай и разберись чем отличается обычные функции от стрелочных.