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

调用订阅方法Angular时箭头函数和普通函数的区别

  • 772

我有一个使用 getSomeData() 方法以角度声明的服务，在该方法中我从 json 收集数据，如下所示：

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());
  }
}

在组件中，我有一个变量data : any;来绘制模板中的数据。

当使用像这样的普通javascript函数调用组件中的订阅服务时，它不会向我显示带有响应的数据。

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")}
   );
}

但是，如果我使用箭头函数调用 subscribe 方法，如果它绘制数据：

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

我认为这是一个异步问题，因为使用正常功能它没有时间绘制数据。

javascript

1 Answers

  1. Best Answer

    箭头函数和普通函数之间的区别在于上下文：在经典函数中，上下文是在调用它们时定义的，而在箭头函数中，它是在声明它们时定义的。没有什么比一个例子更清楚地看到它了：

    (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());

})();

    解释：getA是一个普通的函数，所以如果作为函数调用，就是this调用的上下文，如果作为方法调用，this就是方法所属的对象。

    相反，getB 是一个箭头函数，因此this它始终是声明它的上下文。

    在您的情况下，由于您的函数是在 context 是您的 class 时声明的GetDataService，它将this指向 的实例GetDataService，而传统函数 this 将是 observable 的上下文，因此this.data无法分配它，因为它不存在。

    如何使“经典”功能在这种情况下工作？有两种解决方案：

    //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