(Angular 6) 子函数是否应该 return 对象它正在操作?

(Angular 6) Should a child function return objects that it is manipulating?

我不是受过培训的开发人员,所以我的问题很可能揭示了一些基本的误解。我曾尝试搜索此主题,但我什至不确定要查找哪些短语。 (这与范围有关吗?权限?)

我正在开发 Angular 6 应用程序。在其中,我有一个服务,该服务具有从另一个服务调用函数的功能。

嵌套函数操作作为参数传递给它的对象的各个字段。

像这样:

parentFunction(person:Person, scenario:CalculationScenario){
    person.age = 1
    scenario.value = 0
    this.otherService.childFunction(person, scenario)
    console.log(person.age) //logs "2"
    console.log(scenario.value) //logs "100"
}

在另一个服务中:

childFunction(person:Person, scenario:CalculationScenario){
    person.age = person.age + 1
    scenario.value = scenario.value + 100
    //Does not return anything
}

我之前认为,为了让 person.agescenario.value(在 parentFunction 内)的值反映在 childFunction 内所做的更改,childFunction 必须 return 那些对象(并且 parentFunction 必须将其 "child" 和 "scenario" 对象设置为等于被 return 编辑的对象childFunction).

但是如果我在调用 childFunction 之后立即 console.log 它们,它们的值实际上已经被改变了。

出于某种原因,childFunction return "person" 和 "scenario" 仍然更可取吗?

再次抱歉,如果其他地方存在类似的讨论。我正在努力寻找它们,因为我不确定哪些术语甚至指的是我所询问的主题。

不需要,因为 Person 和 Calculationscenario 看起来像您的 interface/class 它们已经具有引用访问权限,这意味着您可以直接从 ParentFunction 访问 age 和 scenario.value。它的正确方法会造成 it.No 伤害或不破坏编码标准。

根据此 childFunction() 的用例,它可能更可取。

将服务方法设置为 return 值以提高其可重用性是个好主意。

查看此服务的getHeroes()方法:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { MessageService } from './message.service';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor(private messageService: MessageService) { }

  getHeroes(): Observable<Hero[]> {
    this.messageService.add('HeroService: fetched heroes');
    return of(HEROES);
  }
}

不是更改服务中声明的变量的值,而是 return一些英雄。

它很有用,因为在某些组件中,我可以像这里的 getHeroes() 方法那样做一些事情:

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  heroes: Hero[];

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes()
        .subscribe(heroes => this.heroes = heroes);
  }
}

我可以通过更改 getHeroes() 组件方法 轻松自定义要在某些视图上使用的输出,而无需更改服务并确保任何组件都可以使用相同的 getHeroes() 服务方法 .


使用服务方法 return 的另一个很好的理由是更容易测试它们。

如 Balázs Takács 所示,期望值可以非常简单地编写:

it('should return correct sum', () => {
        expect(service.myMethod(1, 2))
            .toEqual(3);
    });

我建议使用 return 新对象的解决方案,因为在这种情况下,您可以轻松地为您的 childFunction 编写单元测试。

    childFunction(person:Person,
        scenario:CalculationScenario): [Person, CalculationScenario] {
        person.age = person.age + 1
        scenario.value = scenario.value + 100
        return [person, scenario];
    }

service.spec.ts

 it('should return updated person and scenario in an array', () => {
        const mockPerson = {age: 0};
        const mockScenario = {value: 0};

        const expectedReturnValue = [{age: 1}, {value: 100}];

        expect(service.childFunction(mockPerson, mockScenairio))
            .toEqual(expectedReturnValue);
    });

此外,我建议您阅读 javascript 中有关不变性的文章,这对类似的事情有很大帮助。