巴贝尔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

在阅读本题之后。我找到了答案。

我将服务实现更改为：

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

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

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

Answer 2

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

正如参考文献所说，

影响箭头函数引入的因素有两个:函数较短和不绑定.

由于源代码包含多个嵌套箭头函数，所以this通过_this变量(即undefined )从顶层作用域检索，因为它具有模块作用域，并且启用了严格模式。

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

它应该是：

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

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

    //#endregion
});