javascript - typescript ， Angular 1.x : How do lambda functions affect property resolution?

Question

编辑:

我能够解决这个问题，但我不知道为什么。因此，我修改了这个问题以反射(reflect)我现在的立场。我留下老问题供引用。

新问题:

将 lambda 函数更改为旧式函数解决了 TS 编译器无法在 $state 上找到属性的问题。我不知道为什么会这样。所以，我现在的问题是......

lambda 函数如何影响属性解析？和..

如何确定何时使用 lambda 与旧式函数？

通过恢复旧式函数修复属性解析:

下面的老问题:

标题:TypeScript、Angular 1.x:$state.go 不存在——但在同一文件的其他地方存在

我正在将 Angular 1.5 应用程序从普通 JS 转换为 TypeScript。我遇到了一个奇怪的问题，其中 $state 上的方法 go 既存在又不存在于同一个类中。

(下图中可能很难看出来，但请注意，在第二个 this.$state.go 中，go 有一条红色下划线，因为编译器认为该属性不存在)

这是完整的类(class):

export class LogoutAndInfoController implements ILogoutAndInfo {
    public memberInfo: Object;
    static $inject = [
        '$http', '$state', 'AuthService', 'API_ENDPOINT', 'UserInfoService'
    ];

    constructor(private $http: angular.IHttpService, private $state: angular.ui.IStateProvider,
    private AuthService: AuthService, private API_ENDPOINT: IAPI_ENDPOINT, private UserInfoService: UserInfoService) {
        this.memberInfo = {};
    }

    destroySession(): void {
        this.AuthService.logout();
    }

    getInfo(): void {
        this.$http.get(this.API_ENDPOINT["url"] + '/memberinfo').then(function (result) {
            this.memberInfo = result.data["user"];
            this.$state.go('login');
        });
    }

    logout(): void {
        this.AuthService.logout().then((result: any) => {
            this.UserInfoService.resetUser();
            this.$state.go('login');
        });
    }
}

我对 TS 和 Angular 框架内的 TS 都很陌生。因此，请告诉我在调试之前是否还需要查看任何其他代码。

Answer 1

这实际上是由于 this 的表现……与您可能使用过的大多数其他语言相比，Javascript 的表现很奇怪。

在第一个示例中，您调用$http.get()。由于 this 在 JS 中的工作方式，将调用 get() 函数，并将 this 设置为任何 this.$ http 就是这种情况。但这就是时髦的开始。 this 仅在调用对象的方法时设置，并且在调用新函数时保持不变。这意味着当 $http.get() 调用回调时，this 仍设置为 $http，因此 $state 不存在。

这就是为什么你到处都能看到 var self = this; 的模式。它允许您绑定(bind)到您知道的 this，因此以下内容将起作用:

var self = this;
this.$http.get(..., function() {
    self.$state.go()
});

另一方面，Lambda 函数的绑定(bind)方式不同。所谓的“箭头函数”没有自己的 this 上下文，因此在创建它们的函数中关闭 this ，因此它们按照您的预期工作.

更多来源:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_binding_of_this