如何将这些箭头功能更改为常规功能以支持IE？

Question

我刚刚从S.O中发现，箭头功能在IE中不可用:(

"Arrow function" not working in IE, why?

我正在使用Barba。js在网页之间进行转换。

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();

如何将这些箭头功能转换为使用functions？

我可以将此脚本包装在if导航器userAgent中，但这并不理想。

Answer 1

使用函数表达式和.bind(this)将this的值内部设置为与外部相同的值：

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

使用this的箭头函数的一般转换规则为：

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

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

另请参阅How to access the correct `this` inside a callback?