В чем разница между этими двумя вызовами методов в TypeScript?

Question

Первый раз, когда я написал этот код и он не работал, выдает ошибку http: не определено.

importFile(fileId: string, fileName: string): void {
    this.fileService.importFileById(fileId, fileName, this.refreshFiles);
}

Второй раз я написал этот код и работал, но я не понимаю, в чем разница.

importFile(fileId: string, fileName: string): void {
    this.fileService.importFileById(fileId, fileName, () => {
        this.refreshFiles();
    });
}

Код функции refreshFiles () выглядит так:

refreshFiles(): void {
    this.http.get('api/Files/GetFiles').subscribe(result => {
        //etc
    }, error => console.error(error));
}

В чем разница между этими двумя частями кода? Почему первый код не работает, а второй работает?

Answer 1

Разница между this.refreshFiles и this.refreshFiles() заключается в том, что первый возвращает вам ссылку на функцию без контекста (вам нужно указать this, когда вы вызовете эту функцию), а второй вызывает Функция напрямую и обеспечивает this неявно.

Что вы можете сделать: вы можете использовать this.refreshFiles.bind(this), чтобы явно установить контекст функции, возвращаемой this.refreshFiles, и передать ее как есть.

this.fileService.importFileById(fileId, fileName, this.refreshFiles.bind(this));

Функция стрелки, которую вы используете в своем рабочем примере, очень похожа на bind (на самом деле функция стрелки является синтаксическим сахаром для bind).

Другой пример:

const test = {
  run() {
    console.log(typeof this.run)
  }
}

console.log(test.run()) // function, because we call it as test.run() and provide test as `this`

let testrun = test.run;

console.log(testrun()) // undefined, because testrun has no `this`

testrun = test.run.bind(test);

console.log(testrun()) // function, because testrun has a bound `this`