How can I change these arrow functions to regular functions to support IE?

Question

I have only just discovered from S.O that arrow functions are not available in IE :(

"Arrow function" not working in IE, why?

I am using Barba.js to transition between web pages.

var transEffect = Barba.BaseTransition.extend({
        start: function () {
            this.newContainerLoading.then(val => this.fadeInNewContent($(this.newContainer)));
        },
        fadeInNewContent: function (nc) {

            . . . 
            // fade outy stuff


            $(this.oldContainer).delay(800).fadeOut(400).promise().done(() => {
                nc.css('visibility', 'visible');
                nc.fadeIn(800, function () {
                    $('#loader').removeClass('loading');
                    _this.done();

                    }
                });
            });
        }
    });
    Barba.Pjax.getTransition = function () {
        return transEffect;
    };
    Barba.Pjax.start();

How can I convert these arrow functions to use functions instead?

I could wrap this script inside of an if Navigator userAgent but this is not ideal.

Answer 1

Use a function expression and .bind(this) to set the value of this inside the function to the same value as outside:

function(val) { this.fadeInNewContent($(this.newContainer)); }.bind(this)

The general transformation rules for arrow functions using this would be:

// From
(arg1, arg2, ...) => expression
(arg1, arg2, ...) => { statement1; statement2; ...}

// TO
function (arg1, arg2, ...) { return expression; }.bind(this);
function (arg1, arg2, ...) { statement1; statement2; ... }.bind(this);

See also How to access the correct `this` inside a callback?