Difference between arrow function and java script style function

Question

I am relatively new to Angular 4.Please bear with me if the question is naive.I have the following code. I am actually firing a http call to backend to retrieve some values.

import { Component} from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  _title = 'Coding Challenge';
  _http: Http;
  consolidateResponse: any[];

  constructor(http: Http) {
    this._http = http;
    this._title = 'Coding Challenge';
  }

  executeHttpCall() {

    this._http.get('http://xxxx')
    .subscribe(response => {
      console.log(response.json());
      this.consolidateResponse = response.json();
    });
  }

}

If I replace the arrow function present in the earlier code

response => {
          console.log(response.json());
          this.consolidateResponse = response.json();
        }

with

function(response) {
console.log(response.json());
              this.consolidateResponse = response.json();
}

It does not work. Basically the view does not get updated. If I use arrow function the view gets updated with the values retrieved from the backend server. In both cases, I can see the results if I printout the results from the server using console.log

From my understanding the arrow function is a short hand for anonymous functions, just like lambda functions in java. There should ideally have no difference.

What am I missing here ?