'this' 在 Typescript 组件中与 Angular2 中的 ES5

Question

所以我一直在尝试将我的 Angular2 应用程序从 Typescript 转换为 ES5，并且一直在尝试使它们运行相似。我遇到的问题是让 this.people 在 ES5 版本中更新。

当我在 constructor 中 console.log this 与在我的 searchFor 方法中相比时，我得到了范围class 与 window 的范围。当我在我的 Typescript 版本中 console.log this 时，它保留在 SearchComponent 中并且在两者中都是相同的。

打字稿版本：

import {Component} from 'angular2/core';
import {PersonService} from './person-service';

@Component({
  selector: 'search',
  properties: ['searchTerm'],
  templateUrl: `search.html`,
})

export class SearchComponent {
  searchTerm:string;
  searchPrefix:string;
  people:Person[];

  constructor(private _personService:PersonService) {
    this.searchTerm   = '';
    this.searchPrefix = "";
    this.people       = [];
    this.predicate    = 'last';
  }

  searchFor(term) {
    if (term.length < 2)
      this.people = [];
    else {
      this._personService.getUsers(term)
        .then((people)=> {
          this.people = people;
        });
    }
  }
}

ES5版本

(function(app) {
  app.SearchComponent = ng.core
    .Component({
      selector: 'search',
      properties: ['searchTerm'],
      templateUrl: 'search.html',
      providers: [app.PersonService]
    })
    .Class({
      constructor: [app.PersonService, ng.router.Router,
        function(_personService, _router) {
          this.searchTerm = '';
          this.searchPrefix = "";
          this.people = [];
          this._personService = _personService;
          this._router = _router;
        }
      ],
      searchFor(term){
        if (term.length < 2)
          this.people = [];
        else {
          this._personService.getUsers(term)
            .then(function(people) {
              //Problem is with the 'this' below:
              this.people = people;
            });
        }
      }
    });
})(window.app || (window.app = {}));

我在使组件和服务正常工作方面取得了一些成功，但我对 this、ha 有点困惑。非常感谢任何有关此问题的帮助或更正！

Answer 1

将代码更改为：

 this._personService.getUsers(term)
        .then(function(people) {
          //Problem is with the 'this' below:
          this.people = people;
        }.bind(this));

（这里的上下文是错误的。在 ES6 中你有解决这个问题的箭头函数）

'this' 在 Typescript 组件中与 Angular2 中的 ES5

'this' in Component of Typescript vs ES5 in Angular2

javascript

ecmascript-5

typescript

angular