javascript - 使用 Protractor 中的 Typescript，如何确定内部函数的范围以便其他函数可以访问它？

Question

我们正在为 Protractor/TypeScript 项目中的常用函数创建一个库，但遇到了范围界定问题。

这是 TypeScript 的摘录。当我们运行应用程序并调用 clickBreadcrumb 时，就会出现问题。 clickBreadcrumb 函数尝试访问 clickRepeaterElement.byName 函数。

export class Lib {
    public clickBreadcrumb = {
        byText(breadcrumbText: string) {
            // This statement fails. TypeError: Cannot read property 'byName' of undefined
            this.clickRepeaterElement.byName('bcItem in vm.breadCrumbs', breadcrumbText);
        }
    };

    public clickRepeaterElement = {
        byName(repeaterText:string, elementToClick:string, parentElement?:protractor.ElementFinder): void {
            // Click the elementToClick.
        },
        byIndex(repeaterText: string, index: number) {
            // Click element at the index.
        },
    };
}

WebStorm 解析 clickRepeaterElement.byName，这实际上向我们表明此应该可以工作。但当我们实际运行测试时，会出现以下错误:

TypeError: Cannot read property 'byName' of undefined

对于具有 C# 背景的人来说，这是出乎意料的。我们如何调整模式才能使问题按照我们的预期得到解决？感谢您的帮助。

Answer 1

当涉及到这个时，Javascript 有奇怪的规则。

在您的情况下，this 指向 byText 函数，而不是类。

我会这样重写:

export class Lib {
  public clickBreadcrumb = {
    byText: this.byText
  };

  public clickRepeaterElement = {
    byName: this.byName,
    byIndex: this.byIndex,
  };

  private byText(breadcrumbText: string) {
    // this is now Lib
    this.clickRepeaterElement.byName('bcItem in vm.breadCrumbs', breadcrumbText);
  }
  private byName(repeaterText: string, elementToClick: string, parentElement ? : protractor.ElementFinder): void {
    // Click the elementToClick.
  }
  private byIndex(repeaterText: string, index: number) {
    // Click element at the index.
  }

}

您还可以使用bind 以确保方法的上下文具有正确的 this 值。

更新:

关于多重实现问题。我建议您使用 TypeScript 中的类以稍微不同的方式构建代码。

export class Lib {
  public clickBreadcrumb = new Breadcrumb(this);

  public clickRepeaterElement = new Repeater(this);

}

export class Breadcrumb {
  constructor(private lib: Lib) {}

  public byText(breadcrumbText: string) {
    this.lib.clickRepeaterElement.byName('bcItem in vm.breadCrumbs', breadcrumbText);
  }

}

export class Repeater {
  constructor(private lib: Lib) {}

  public byName(repeaterText: string, elementToClick: string, parentElement ? : protractor.ElementFinder): void {
    // Click the elementToClick.
  }

  public byIndex(repeaterText: string, index: number) {
    // Click element at the index.
  }

  public byText(test: string) {
    // some other implementation
  }
}

您还可以将库的较小部分发送到一些地方，而不是到处发送 Lib。如果/当您的图书馆增长时，它还可以更好地分离关注点。