如果回调名称在其他类中定义，如何正确定义回调函数的名称作为参数答案

【问题标题】：How to define a name of a callback function properly as argument, if the callback name is defined in other class如果回调名称在其他类中定义，如何正确定义回调函数的名称作为参数
【发布时间】：2021-08-10 10:52:42
【问题描述】：

这是一个模型：我有测试类和 columnHeader 类。测试类调用一个函数，循环遍历表上的所有表列。对于每一列，我想应用过滤或排序。使用以下代码，我的问题是 eslint 抱怨：

let columnHeader:
ColumnHeader 避免引用未绑定的方法可能会导致无意的this 作用域。

而且在回调函数（clickColumnActionFilter,clickColumnSort）中没有定义变量tableNam。

测试文件：从 '../../../support/spa/ColumnHeader' 导入 { ColumnHeader };

export function tableColumnActionTest() {
  describe(`Table column sorting and filtering`, () => {
    let columnHeader = new ColumnHeader();

    before(() => {
      A_page.visit(//some url);
      columnHeader = new ColumnHeader();
      columnHeader.setTableN('aTable');
    });

    it.only('Select column action tests', () => {
      columnHeader.loopThroughColumnHeader(columnHeader.clickColumnActionFilter);
    });
  });
}

类文件：

import { table } from './Table';

interface Action {
  (colId: string): void;
}

export class ColumnHeader {
  tableNam: string;

  setTableN(tabN: string) {
    this.tableNam = tabN;
  }  

  clickColumnSort(colName: string) {
    cy.log(`tableName: ${this.tableNam}`);
    // do sorting
  }

  clickColumnActionFilter(colName: string) {
    cy.log(`tableName: ${this.tableNam}`);
    // do filtering
  }

  loopThroughColumnHeader(columnAction: Action): void {
      for (let i = 1; i <= 10; i++) {
        table.getColumnIdFromNr(i);
        cy.get('@COLID').then(($colIDent) => {
          const colId = $colIDent as unknown as string;
          columnAction(colId);
        });
        cy.wait(500);
      }
    });
    table.getColumnNameFromNr(2);
  }
}

export const columnHeader = new ColumnHeader();

你知道如何正确调用函数名作为参数以保证环境正确吗？

【问题讨论】：

标签： javascript typescript cypress

【解决方案1】：

好的，我发现：在测试文件中，我需要绑定列标题。这样就解决了 eslint 的抱怨和未定义的成员变量

columnHeader.loopThroughColumnHeader(columnHeader.clickColumnActionFilter.bind(columnHeader));

而不仅仅是：

columnHeader.loopThroughColumnHeader(columnHeader.clickColumnActionFilter)

【讨论】：