Home / Questions / 101927
Accepted
Yoel Macia Delgado
Asked: 2020-09-14 01:46:22 +0800 CST 2020-09-14 01:46:22 +0800 CST

Difference between arrow function and normal function when calling subscribe method Angular

  • 772

I have a service declared in angular with the getSomeData() method in which I collect data from a json like so:

import { Injectable } from '@angular/core';
import {Http} from '@angular/http';
import { HttpModule } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import "rxjs/add/operator/map";
import "rxjs/add/operator/filter";

@Injectable()
export class GetDataService {

  constructor(private http: Http) { }

  getSomeData() {
    return this.http.get("dataTable.json")
    .map(res => res.json());
  }
}

In the component I have a variable data : any;to paint the data in the template.

When calling the subscribe service in the component with a normal javascript function like so, it doesn't show me the data with the response.

ngOnInit():void {
   this._service.getSomeData().subscribe(
        function(response) { this.data = JSON.stringify(response) },
        function(error) { console.log("Error happened" + error)},
        function() { console.log("the subscription is completed")}
   );
}

However if I call the subscribe method with an Arrow Function if it paints the data:

 ngOnInit():void {
    this._service.getSomeData().subscribe(
          response=>{
           this.data = JSON.stringify(response);
          }
          err=>{
              console.log("Error happened" + error)
          }
    );
 }

I think it is a matter of asynchrony since with normal functions it does not have time to paint the data.

javascript

1 Answers

  1. Best Answer

    The difference between an arrow function and a normal one is the context: In classic functions the context is defined when calling them and in arrow functions it is defined when declaring them. Nothing better than an example to see it clearly:

    (function() {

this.b="otra cosa";
this.a="una cosa"

function MiClase() {
  this.a="hola";
  this.b="adios";
}

let obj= new MiClase();
let getA=function () {
  return this.a;
};

obj.getA=getA;

let getB=() => this.b;
obj.getB=getB;

console.log(getA());
console.log(getB());

console.log(obj.getA());
console.log(obj.getB());

})();

    Explanation: getA is a normal function, so if it's called as a function, thisit's the context it's called in, but if it's called as a method, thisit's the object the method belongs to.

    Instead, getB is an arrow function, so thisit is always the context in which it was declared.

    In your case, since your functions are declared when the context is your class GetDataService, it thiswill point to the instance of GetDataService, while traditional functions this will be the context of the observable, so this.datait can't be assigned because it doesn't exist.

    How to make "classic" functions work in this scenario? There are two solutions:

    //por defecto el contexto es el objeto global (window)
console.log(this===window);

window.test="esto es un test";

let obj={
  test: "Atributo de obj"
}

function getTest1(){
  return this.test;
}

let self=this;
function getTest2(){
//closure (clausura): hemos guardado el contexto en una variable accesible por la función
  return self.test;
}



obj.test1=getTest1;
obj.test2=getTest2;
obj.test3=getTest1.bind(window);
//bind devuelve una función con el contexto fijado al parámetro que se le pase

console.log(obj.test1());
console.log(obj.test2());
console.log(obj.test3());

    • 8