Как привязать функцию к контексту объекта, если функция объявлена и вызвана в контексте другой функции?

Question

[jwwwe]

Всем привет. Пытаюсь понять тонкости ООП. Сейчас главное недопонимание как привязать функцию rangeEnd к объекту. Делал через стрелочные функции, с ними все было нормально тк они не имеют своего this, это я понял, но почему я не могу привязать rangeEnd к объекту? Я думаю, что моя ошибка в том, что привязываю ее к контексту handlerClick, а как привязать ее к объекту? Самое главное условие в том, что функция должна быть объявлена и вызвана внутри функции handlerClick.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpened: false
    };
  };
  handlerClick(event) {
    function rangeEnd(thisPage) {
      let end = thisPage + 2;
      return (end <= totalPages) ? end : thisPage;
    }
    this.rangeEnd.bind(this, 5)
  }
}

Answer 1

[Javid Asgarov]

А что handlerClick возвращает? В любом случае, я так понимаю, что должно быть так:

// в конструкторе
    this.handlerClick = this.handlerClick.bind(this);
// в функции handlerClick 
rangeEnd.bind(this, 5);

Comments

[jwwwe]

Почему то не срабатывет:
Конструктор вот так:

constructor(props) {
    super(props);
    this.state = {
      isOpened: false
    };
    this.handlerClick = this.handlerClick.bind(this);
  };

Вызов так:

function rangeStart(thisPage) {
      this.setState({isOpened:true});
      alert(this.state.isOpened);
    }

    rangeStart.bind(this,5);

Выдает ×
TypeError: Cannot read property 'setState' of undefined. Как я понял функция rangeStart вне контекста объекта, а привязать не могу.

[jwwwe]

Объявление и вызов в handlerClick

[Javid Asgarov]

Чтобы вызвать rangeStart нужно:
rangeStart.bind(this,5)();

У меня привязывается, проверье что дает console.log(this) в вызове rangeStart, должен компонент вернуть.

[jwwwe]

Javid Askerov, и у Вас setState вызывается?

[Javid Asgarov]

jwwwe, да. Я не поленился и даже создал пример небольшой на эту тему на codepen - https://codepen.io/askerovlab/pen/dVGRMg
Если это не то, что нужно, то уточните еще раз, что происходит.

Answer 2

[holymotion]

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpened: false
    };
  };
  handlerClick(event) {
    function rangeEnd(thisPage) {
      let end = thisPage + 2;
      return (end <= totalPages) ? end : thisPage;
    }
    rangeEnd.bind(this); 
  }
}

Answer 3

[Владимир]

Ты привязываешь, но не вызываешь, а вообще задача дикая, создать функцию внутри метода инстанса, внутри ссылаться на проперти инстанса, не проще ли сделать эту функцию еще одним методом этого инстанса?
https://jsfiddle.net/44rg8hjk/