我怎样才能创建Javascript的多态方法？

Question

我尝试创建一些example

如何编写updateStepData方法，如果获取类型为stepOneData的数据，将更改stepOneData，如果获取类型为stepOneData的数据，将更改stepTwoData？

  updateStepData(data: StepOneData | StepTwoData): void {
     Object.keys(data).map(key => {
       // if (data instanceof StepOneData) {
          this.stepOneData[key] = data[key];
       // } 

       // if (data instanceof StepTwoData) {
          this.stepTwoData[key] = data[key];
       // } 
     });
  }

我已经尝试过使用instanceof运算符但是在这里它不起作用。

Answer 1

我在Step1Component中找到了这个方法：

onFormChanges(): void {
    this.stepOneForm.valueChanges
      .subscribe((data: StepOneData) => {

        this.registrationService.updateStepData(data);
      });
}

像这样改变它：

onFormChanges(): void {
    this.stepOneForm.valueChanges
      .subscribe((data: StepOneData) => {

        const stepOneData = new StepOneData();

        stepOneData.firstName = data.firstName;
        stepOneData.firstName = data.lastName;      

        this.registrationService.updateStepData(stepOneData);
      });
}

对Step2Component做同样的事情

现在你可以使用你在代码中写的instanceof：

   if (data instanceof StepOneData) {
    this.stepOneData[key] = data[key];
  } 

  if (data instanceof StepTwoData) {
     this.stepTwoData[key] = data[key];
  } 

=========================================

为了生成可读代码，您可以在Step Data和StepTwo Data类中添加构造函数来初始化它们的属性，如下所示：

export class StepTwoData {

  constructor(public city:string,public state:string){}

}

在您的组件中：

 onFormChanges(): void {
    this.stepTwoForm.valueChanges
      .subscribe((data: StepTwoData) => {

        const stepTwoData= new StepTwoData(data.city,data.state);    

        this.registrationService.updateStepData(stepTwoData);
      });
}

==========================

更新：

为了更好的设计，我建议你为每种类型写两种方法。例如“UpdateStepOneData”和“UpdateStepTwoData”。

如果这些方法中有共享逻辑，则将其放在名为“UpdateStepData”的方法中。

UpdateStepOneData(data:StepOneData){

       // Custom Code goes here

       UpdateStepData(...); // Shared Logic goes here

}

UpdateStepTwoData(data:StepTwoData){

       // Custom Code goes here

       UpdateStepData(...); // Shared Logic goes here

}