Access variables declared a component from a RxJS subscribe() function
<p>I am able to use <code>this.variable</code> to access variables in any part of the component, except inside RxJS functions like <code>subscribe()</code> or <code>catch()</code>. </p>

<p>In the example below, I want to print a message after running a process:</p>

<pre class="lang-typescript prettyprint-override"><code>import {Component, View} from 'angular2/core';

@Component({
    selector: 'navigator'
})
@View({
    template: './app.component.html',
    styles: ['./app.component.css']
})
export class AppComponent {
    message: string;

    constructor() {
        this.message = 'success';
    }

    doSomething() {
        runTheProcess()
        .subscribe(function(location) {
            console.log(this.message);
        });
    }
}
</code></pre>

<p>When I run <code>doSomething()</code>, I get <strong>undefined</strong>. This scenario can be solved using a local variable:</p>

<pre class="lang-typescript prettyprint-override"><code>import {Component, View} from 'angular2/core';

@Component({
    selector: 'navigator'
})
@View({
    template: './app.component.html',
    styles: ['./app.component.css']
})
export class AppComponent {
    message: string;

    constructor() {
        this.message = 'success';
    }

    doSomething() {

        // assign it to a local variable
        let message = this.message;

        runTheProcess()
        .subscribe(function(location) {
            console.log(message);
        });
    }
}
</code></pre>

<p>I suppose this is related to the <code>this</code>, however, why I can't access the <code>this.message</code> inside the <code>subscribe()</code>?</p>