1

Имеется такой конструктор:

function Options() {
    this.property = '';

    $('elem').on('click', function(){
        this.property = 'str'; // попытка обращения к внешнему this
    });
}

но внутри обработчика свой this, как мне обратиться к this.property?

Александр
  • 147
  • Сохранить в другую переменную и обращаться к ней. – Alexey Ten Jan 30 '20 at 05:36
  • Или использовать стрелочную функцию, если внутренний this не нужен. – Alexey Ten Jan 30 '20 at 05:37
  • Тип свойства примитивный, копирование в другую переменную будет по значению. А мне нужно именно значение свойства изменить, а не другой переменной. Или я чего-то недопонимаю. По поводу стрелок можно пояснить, как это сделать? – Александр Jan 30 '20 at 05:45
  • 2
    var that = this; ... that.property = "str" сохранять в переменную надо не свойство, а this – Alexey Ten Jan 30 '20 at 05:47
  • Да, точно, так и есть! Спасибо!) – Александр Jan 30 '20 at 05:58
  • 1
    Вместо function(){...} можно использовать ()=>{...}. – Stepan Kasyanenko Jan 30 '20 at 07:56

1 Answers1

3

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

function Options() {
    this.property = '';
    this.clickHandler = function(){
        this.property = 'str';
    };

    $('elem').on('click', this.clickHandler.bind(this));
}

Или же ты можешь использовать стрелочную функцию вместо обычной. В таком случаи потери контексту не будет:

function Options() {
    this.property = '';

    $('elem').on('click', () => {
        this.property = 'str';
    });
}
an_parubets
  • 403