angularjs - 带有 ES6 类和 Babel 的 Angular 服务

Question

我正在尝试将 ES6 类用作 Angular 服务，但是当它被实例化时，这些方法无法访问构造函数变量。

class dataWrapperService {

    constructor($q, $log) {
        this.$q = $q;
        this.$log = $log;
    }

    data() {
        console.log(this.$q);
    }
}

dataWrapperService.$inject = ['$q', '$log'];

app.service('dataWrapper', dataWrapperService);

一旦服务被 Angular 注入(inject)并且我在其上调用 data 方法，该方法就无法访问构造函数值。

// calling the data method results in an error
dataWrapper.data();   //TypeError: Cannot read property '$q' of undefined

//  console.log output of dataWrapper:
Object
  $log: Object
  $q: Q(resolver)
  __proto__: smDataWrapperService
    constructor: smDataWrapperService($q, $log)
    data: data()
    __proto__: Object

但...

我可以 新 手动 dataWrapperService 并且工作得很好。

var dataWrapper = new smDataWrapperService("hello", "sir");
dataWrapper.data();   // "hello"

我在这里想念什么？

更新:

这似乎只发生在 Promise 回调中:

我通常将函数传递给 然后/ catch 像这样:

$http.get('whatever').then(dataWrapper.data);

但只有以下方法有效:

$http.get('whatever').then((response) => smDataWrapper.data(response))

Answer 1

我知道这已经晚了，但也许今天有人会像我一样偶然发现这个问题，遇到类似的问题，所以......

实际上，这与 promise 无关。当你这样做时:

let function1 = () => {}
let function2 = function1

实际上， this对象的功能不同。因此，当您尝试 .then(function1) , 实际上 function1正在复制到参数 successCallback它是 this被改变。

但是当你使用 .then(() => function1()) , successCallback接收您的 lambda，以及实际的 this的 function1没有丢失。

所以如果你不知道，你做什么 从不将函数分配给 javascript 中的函数，请改用 lambdas