Как вернуть контекст в данном случае?

Question

[Masterstvo]

Добрый день! Никак не могу понять, как можно в данном случае вернуть контекст. Пример кода ниже!

class App extends Component {

    constructor(props) {
        super(props);
        this.context = new (window.AudioContext || window.webkitAudioContext)();
    }

    play = () => {
        this.source = context.createBufferSource();
        this.source.buffer = this.buffer;
        this.destination = context.destination;
        this.source.connect(this.destination);
        this.source.start(0);
    };

    stop = () => {
        this.source.stop(0);
    };


    loadSoundFile = (url) => {
         let xhr = new XMLHttpRequest();
         xhr.open('GET', url, true);
         xhr.responseType = 'arraybuffer'; // важно
         xhr.onload = function(e) {
            this.context.decodeAudioData(this.response,
                function(decodedArrayBuffer) {
                    this.buffer = decodedArrayBuffer;
                }, function(e) {
                    console.log('Error decoding file', e);
                });
        };
        xhr.send();
    };

    componentDidMount() {
        this.loadSoundFile('audio/i_see_you.mp3');
    }

    render() {
        return (
            <div>
                <audio controls>
                    <source src='audio/i_see_you.mp3' />
                </audio>
            </div>
        );
    }
}

В функции loadSoundFile, когда мы делаем AJAX запрос, мне нужно использовать this (в частности this.context и this.buffer). Но контекст в данном куске кода теряется. С возвращением контекста еще не совсем разобрался, поэтому прошу помощи у знающих людей!!! Если можно с небольшим объяснением)

Answer 1

[Олег Драпеза]

1 вариант - использовать стрелочные функции:

method(function() {
...
});

// заменить на 
method(() => {
...
})

2 вариант - привязать контекст к переменной:

const that = this;
that.context;

Почитайте это

Comments

[Masterstvo]

Спасибо! Стрелочные ф-ии действительно помогли не потерять контекст)

[Олег Драпеза]

Masterstvo, надеюсь вы изучили что такое стрелочные функции и где контекст, а не просто использовали их)