title: Access variables declared a component from a RxJS subscribe() function
body: <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>