How to use a function within a function within a class?

Question

JavaScript

Good afternoon!
There is a service in angular (to listen to music).
there he is:

export class PlayService {
    private audios = [];
    private nowPlaying = 0;
    private player = new Audio();

    public addAudios(data, nowPlaying){
        this.audios = [];
        this.audios = data;
        this.nowPlaying = nowPlaying;
        console.log('End sending');

        console.log('Start audio file');
        this.player.src = 'src/files/'+this.audios[nowPlaying]['file'];
        this.player.play();

        this.player.addEventListener('ended', function (){
            this.nextSong(); // вот здесь ругается
            console.log('Audio file ended');
        });
    }
    public nextSong(){
        console.log('Start next audio file');
        this.nowPlaying++;
        this.player.src = 'src/files/'+this.audios[this.nowPlaying]['file'];
        this.player.play();
    }
}

The music itself works, but switching at the end does not work
Swears at this.nextSong(); . I don’t understand what’s wrong here .. I tried without this and tried self
, everything doesn’t work .. What could be the matter?

Answer 1

Arrow functions like for this just to forward this.
Isn't that how it works?

this.player.addEventListener('ended', () => {
            this.nextSong();
            console.log('Audio file ended');
        });