javascript - Typescript: '() => {}' 不是 'function () {}' 的替代品吗？

Question

这个问题已经有答案了:

Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? (5 个回答)

When should I use arrow functions in ECMAScript 6? (9 个回答)

已关闭 6 年前。

我正在尝试掌握 ng2 中的路由，但遇到了一个奇怪的问题。我尝试设置一个超时，以便在用户到达“/home”时导航回“/”。

这有效:

export class HomeComponent implements OnInit {

    constructor(private router: Router) { }

    ngOnInit() {
        setTimeout(() => {this.router.navigate(['/']);}, 2000);
    }

}

但这并不:

export class HomeComponent implements OnInit {

    constructor(private router: Router) { }

    ngOnInit() {
        setTimeout(function () {this.router.navigate(['/']);}, 2000);
    }

}

失败并显示 - EXCEPTION: Cannot read property 'navigate' of undefined

为了使其正常工作，我必须将其更改为:

export class HomeComponent implements OnInit {

    constructor(private router: Router) { }

    ngOnInit() {
        var _router = this.router;
        setTimeout(function (_router) {_router.navigate(['/']);}, 2000, _router);
    }

}

顺便说一下，这就是 TypeScript 编译的方式 () => {}进入。但它难道不知道this在第二个代码片段的 setTimeout() 中不可用？这是 TypeScript 的限制吗？

Answer 1

对于 Typescript，this 是对象，其表示方式类似于 Angular 1.x 中的 $scope 变量。如果您在 Typescript 逻辑范围内编写原生 JavaScript，那么它会将 this 视为 window 对象。因此您将无法再访问 typescript 对象this。

为了克服这个问题，我有一个简单的想法，每当您使用 JavaScript 代码时都可以应用:

export class HomeComponent implements OnInit {
   constructor(private router: Router) { }
   ngOnInit() {
      let that = this; // Assign scope variable to temporary variable: that 
      setTimeout(function () {that.router.navigate(['/']);}, 2000); // Use that particular variable anywhere in the method scope instead of Scope variable
   }
}

Note: Typescript doesn't encourage you to use JavaScript in the code. Because ts linting is already generating JavaScript output. But still if you want to use JavaScript, then this is the only solution.