Visibilità di “this” nelle funzioni JS

In Javascript la keyword “this” non ha sempre lo stesso funzionamento, ma si adatta alle circostanze, in particolare in una funzione, this assume un valore diverso in base al metodo di chiamata della funzione stessa.

Riporto un esempio di una funzione invocata utilizzando Vue e Buefy:

methods: {
        confirm: function (index) { 
            var lista = this.players;
            this.$buefy.dialog.confirm({
                cancelText: 'Annulla',
                message: 'Procedi con l\'eliminazione del giocatore ?',
                onConfirm: function() { 
                    this.deletePlayer(index);
                }
            })
        },
        deletePlayer: function(index){
            this.$delete(this.players,index);
        },

Quando viene invocato il metodo “confirm” a seguito di un evento, il pezzo di codice invoca un metodo di Buefy per aprire una finestra di dialogo e sono se l’utente conferma, si può procede all’eliminazione del giocatore.
Però questo codice non funziona perché non si riesce a invocare il metodo “deletePlayer” all’interno della funzione chiamata dopo “onConfirm:” in quanto la keyword this non fa riferimento all’oggetto globale, ma solo all’oggetto Buefy che ha invocato la funzione.

Per rimediare a questo problema di scope si ricorre alle funzioni arrow che consentono di mantenere il riferimento all’oggetto globale.

 onConfirm: () => {               
                    this.deletePlayer(index);
                }

Per approfondire l’argomento leggere le Funzioni Arrow su Javascript MDN