Почему private поле имеет значение "undefined" внутри private метода своего же компонента в TypeScript?

Question

Разрабатываю компонент, отвечающий за авторизацию в Angular2-приложении. Код компонента:

import { Component, OnInit } from '@angular/core';
import { IAuthData } from './auth-data';
import { IAuthResult } from './auth-result';
import { AuthorizationService } from './authorization.service';
import { NotificationsService } from 'angular2-notifications';

@Component({
    templateUrl: 'authorization.component.html',
    styleUrls: [ 'authorization.component.css' ],
    moduleId: module.id
})
export class AuthorizationComponent implements OnInit {
    private _authorizationService: AuthorizationService;
    private _notificationsService: NotificationsService;

    constructor(private authorizationService: AuthorizationService, private notificationsService: NotificationsService) {
        this._authorizationService = authorizationService;
        this._notificationsService = notificationsService;
    }

    public pageTitle: string = 'Авторизация';
    public login: string;
    public password: string;

    ngOnInit() : void {

    }

    authorize(): void {
        this._notificationsService.info(this.pageTitle, `Попытка авторизации пользователя "${this.login}": запрос отправлен на сервер.`);
        this._authorizationService.authorize(<IAuthData>{ login: this.login, hash: this.password })
            .subscribe(authResult => {
                let message: string = `"${this.login}": ${authResult.message}`;
                if (authResult.isAuthorized) {
                    this._notificationsService.info(this.pageTitle, message);
                }
                else {
                    this._notificationsService.error(this.pageTitle, message);
                }
            });
    }
}

Данный вариант работает, однако при рефакторинге решил вынести лямбду, которая передаётся в метод subscribe в отдельный метод:

private processAuthResult(authResult: IAuthData): void {
     let message: string = `"${this.login}": ${authResult.message}`;
                    if (authResult.isAuthorized) {
                        this._notificationsService.info(this.pageTitle, message);
                    }
                    else {
                        this._notificationsService.error(this.pageTitle, message);
                    }let message: string = `"${this.login}": ${authResult.message}`;
                    if (authResult.isAuthorized) {
                        this._notificationsService.info(this.pageTitle, message);
                    }
                    else {
                        this._notificationsService.error(this.pageTitle, message);
                    }
}

authorize(): void {
            this._notificationsService.info(this.pageTitle, `Попытка авторизации пользователя "${this.login}": запрос отправлен на сервер.`);
            this._authorizationService.authorize(<IAuthData>{ login: this.login, hash: this.password })
                .subscribe(this.processAuthResult);
        }

Если организовать код подобным образом, поле this._notificationsService имеет значение undefined. В чём может быть причина?

Добавьте, пожалуйста, код метода authorize после рефакторинга — kmv, Mar 31 '17 at 11:18

score 2 · Accepted Answer · edited Mar 31 '17 at 11:50

2

Тут дело не в модификаторе доступа, а в смене контекста this. Вам необходимо сохранить контекст :

authorize(): void {
    this._notificationsService.info(this.pageTitle, `Попытка авторизации пользователя "${this.login}": запрос отправлен на сервер.`);
    this._authorizationService.authorize(<IAuthData>{ login: this.login, hash: this.password })
        .subscribe(authResult => this.processAuthResult(authResult));
    }
}

edited Mar 31 '17 at 11:50

Zugr

448

answered Mar 31 '17 at 11:19

Kostiantyn Okhotnyk

5,398

Попробовал - работает. А можете подробнее пояснить, что именно вы написали? – klutch1991 Mar 31 '17 at 11:21
смотрите в subscribe this ещё является ссылкой на Ваш AuthorizationComponent, но когда вы вызываете метод processAuthResult он вызывается с другим this – Kostiantyn Okhotnyk Mar 31 '17 at 11:29
1

Думаю в данном контексте будет даже работать если self.processAuthResult.call(self, authResult ) заменить на this.processAuthResultl(authResult ) – Zugr Mar 31 '17 at 11:30
Детальнее про контекст вызова – Kostiantyn Okhotnyk Mar 31 '17 at 11:31
а call может подменять контекст this на тот который мы ей передадим. В Данном случае на self – Kostiantyn Okhotnyk Mar 31 '17 at 11:32
2

call тут лишний - и без него все работать будет. На самом деле, проблема исправилась лямбдой :-) – Pavel Mayorov Mar 31 '17 at 11:36
@PavelMayorov да, проверил, работает без call. – Kostiantyn Okhotnyk Mar 31 '17 at 11:41
@ Zugr да, без call работает – Kostiantyn Okhotnyk Mar 31 '17 at 11:44
Или передавать .subscribe(this.processAuthResult.bind(this)); ); – Serginio Apr 07 '17 at 13:54

Почему private поле имеет значение "undefined" внутри private метода своего же компонента в TypeScript?

1 Answers1