javascript - 当方法参数不是普通对象时，TypeScript instanceof 不起作用

Question

我有一个从参数类型已知的两个地方调用的方法。在此方法中，会检查传入参数的两种类型，但都返回 false。我不明白为什么会发生这种情况。我读过其他人发布的有同样问题的问题。但我的问题不同，因为我没有像他一样构建一个简单的对象。问题可以在这里找到:

TypeScript instanceof not working

这是导致问题的方法:

  changeUnitOfValueInput(filter){
    console.log((filter === undefined));
    let filterType: string;
    if (filter instanceof HTMLInputElement)
        filterType = (filter as HTMLInputElement).value;
    else if (filter instanceof AdvancedFilter){
      console.log("its in");
        filterType = (filter as AdvancedFilter).advancedFilterSubject;
    }
    else{
      console.log('im out');
       return;
    }
    switch(filterType){
      case AdvancedFilterSubject.GROWTH_TEMPERATURE:{
        this.unitLabel = (this.filterOptionsForm.controls['measureSystem'].value ==='imperial') ? '°F' : '°C';
        break;
      }
      case AdvancedFilterSubject.GROWTH_DAYS:{
        this.unitLabel = 'days'
        break;
      }
      //fall through
      case AdvancedFilterSubject.PLANT_HEIGHT:
      case AdvancedFilterSubject.PLANT_SPACING:
      case AdvancedFilterSubject.ROW_SPACING:
      case AdvancedFilterSubject.SOW_DEPTH:
        this.unitLabel = (this.filterOptionsForm.controls['measureSystem'].value ==='imperial') ? '″' : '㎝';
    }
  }

该组件方法中调用该方法:

  populateFieldsWithSelectedFilterData(existingAdvancedFilter: AdvancedFilter){
    this.changeUnitOfValueInput(existingAdvancedFilter);
    this.filterOptionsForm.controls['filterType'].setValue(existingAdvancedFilter.advancedFilterSubject);
    this.filterOptionsForm.controls['logicalOperator'].setValue(existingAdvancedFilter.logicalOperator);
    this.filterOptionsForm.controls['advancedFilterValue'].setValue(existingAdvancedFilter.filterValue);    
  }

第二个被调用的地方是前端(html 部分):

    <p-dropdown #filterType formControlName = "filterType" placeholder="Filter type" [options]="filterTypesList" (onChange)="changeUnitOfValueInput(filterType)" >
    </p-dropdown>

该方法总是过早返回，因为两个 instanceof 条件都返回 false。谁能告诉我这是怎么回事？

编辑:这是 HTML 中使用的 filterTypeList 的定义

  filterTypesList: SelectItem[] = [
    {label:'Minimum temperature', value: AdvancedFilterSubject.GROWTH_TEMPERATURE},
    {label:'Growth days', value: AdvancedFilterSubject.GROWTH_DAYS},
    {label:'Maximum height', value: AdvancedFilterSubject.PLANT_HEIGHT},
    {label:'Row spacing', value: AdvancedFilterSubject.ROW_SPACING},
    {label:'Plant spacing', value: AdvancedFilterSubject.PLANT_SPACING},     
    {label:'Sow depth', value: AdvancedFilterSubject.SOW_DEPTH}  
    ];

Answer 1

为了使 instanceof 工作，您正在使用的对象的原型(prototype)必须与构造函数匹配；在本例中为 HTMLInputElement 或 AdvancedFilter。这不一定是这种情况，具体取决于 AdvancedFilter 的构造方式。您最好创建一个 type guard function :

function isAdvancedFilter(possibleAdvancedFilter: any): possibleAdvancedFilter is AdvancedFilter {
  return possibleAdvancedFilter &&
    !!(possibleAdvancedFilter as AdvancedFilter).advancedFilterSubject;
}

您当然可以将此函数更改为您需要执行的任何检查，以确保该值可以用作高级过滤器。然后只需使用 isAdvancedFilter(variable) 而不是 instanceof variable。