Babel 7 这变成 _this angularjs [重复]

Question

我正在使用 ES6、AngularJS 和 babel-loader 7.1.4、Webpack 3 制作应用程序。 在我创建服务文件之前一切正常：

这是我的服务：

'use strict';

module.exports = (ngModule) => {

    ngModule.service('$ui', () => {


        //#region Methods

        /*
        * Trigger windows resize function.
        * */
        this.reloadWindowSize = () => {
            $(window).resize();
        };

        //#endregion
    });
};

将源代码从 ES6 转成 ES2015 后，我的服务变成了：

module.exports = function (ngModule) {

    ngModule.service('$ui', function () {

        //#region Methods

        /*
        * Trigger windows resize function.
        * */
        _this.reloadWindowSize = function () {
            $(window).resize();
        };

        //#endregion
    });
};

如您所见，this 现在变成了_this，因此，我无法执行服务文件中的功能。

这是我的 babel 配置

{
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: [['env', { "modules": false }]]
        }
    }
}

我做错了什么？

谁能帮帮我？

谢谢，

Answer 1

箭头函数不仅仅是常规函数的快捷方式。

正如the reference 所说，

两个因素影响箭头函数的引入：更短的函数和 this 的非绑定。

由于源码中包含多个嵌套的箭头函数，this是通过_this变量从顶层作用域获取的，也就是undefined，因为它是模块作用域，并且开启了严格模式。

对service 服务使用箭头函数在语义上是不正确的，因为它们是用new 实例化并使用this 作为服务实例，而箭头不能是newed 并且没有自己的this .

应该是：

ngModule.service('$ui', function () {
    //#region Methods

    /*
    * Trigger windows resize function.
    * */
    this.reloadWindowSize = () => {
        $(window).resize();
    };

    //#endregion
});

Answer 2

读完this topic。我找到了答案。

我改变了我的服务实现：

'use strict';

module.exports = (ngModule) => {

    ngModule.service('$ui', () => {


        //#region Methods

        /*
        * Trigger windows resize function.
        * */
        this.reloadWindowSize = () => {
            $(window).resize();
        };

        //#endregion
    });
};

到这里：

module.exports = (ngModule) => {

    ngModule.service('$ui', () => {

        return {

            //#region Methods

            /*
            * Reload window size.
            * */
            reloadWindowSize: () => {
                $(window).resize();
            }

            //#endregion
        }
    });
};

在服务声明中，我返回了一组函数并且它起作用了。

只是想让任何人知道这件事。我花了一个晚上才找到答案。