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从顶级作用域检索undefined，因为它是模块的作用域，并且严格模式已启用。

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

应该是：

this

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

在服务声明中，我返回一组函数并且它有效。

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

Babel 7这变成了这个角度

2 个答案: