避免引用未绑定的方法，这可能会在调用静态方法时导致意外范围界定“this”错误

Question

我在下面创建了一个方法映射来帮助我动态调用静态方法。但是，我一直运行进入以下错误：

Avoid referencing unbound methods which may cause unintentional scoping of this

我该如何解决这个问题？

  addCourseContentElementMethodMap = {
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_AUDIO]:
      CourseContentElementAudioService.addCourseContentElement,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_BUTTON]:
      CourseContentElementButtonService.addCourseContentElementButton,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_CODE_FIDDLE]:
      CourseContentElementCodeService.addCourseContentElementCodeFiddle,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_CODE_MARKDOWN]:
      CourseContentElementCodeService.addCourseContentElementCodeMarkdown,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_CODE_REPL]:
      CourseContentElementCodeService.addCourseContentElementCodeRepl,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_DOCUMENT]:
      CourseContentElementDocumentService.addCourseContentElement,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_EDITOR]:
      CourseContentElementEditorService.addCourseContentElement,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_EMBED_TWEET]:
      CourseContentElementEmbedService.addCourseContentElementEmbedTweet,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_EMBED_YOUTUBE]:
      CourseContentElementEmbedService.addCourseContentElementEmbedYoutube,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_IMAGE]:
      CourseContentElementImageService.addCourseContentElement,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_QUIZ]:
      CourseContentElementQuizService.addCourseContentElement,
    [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_VIDEO]:
      CourseContentElementVideoService.addCourseContentElement,
  };

上面的每一行都发生了：

   55:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   57:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   59:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   61:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   63:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   65:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   67:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   69:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   71:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   73:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   75:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
   77:7   error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method

有问题的方法在这里：

export class CourseContentElementAudioService {
  constructor(private courseContentElementService: CourseContentElementsService) {}
}

其中一种方法的示例：

  static addCourseContentElement(
    courseContents: ICourseContent[],
    selectedCourseContentElementUid: string,
    selectedCourseContentUid: string | undefined
  ): ICourseContent[] {
    return CourseContentElementsService.addCourseContentElement(
      courseContents,
      selectedCourseContentUid,
      {
        uid: selectedCourseContentElementUid,
        url: initialState.courseMedia.audio[0].url,
      },
      CourseContentElementType.AUDIO
    );
  }

Answer 1

有一些选项可供您选择：

为整个项目关闭此 lint 规则
为此 file/block 代码关闭此 lint 规则
绑定方法，所以它们不再是未绑定的

[CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_AUDIO]:
 CourseContentElementEditorService.addCourseContentElement.bind(CourseContentElementEditorService)

最短的一次使用箭头包装器来绑定你的函数

 [CourseContentElementMethodMap.ADD_COURSE_CONTENT_ELEMENT_AUDIO]:
 (...args) => CourseContentElementEditorService.addCourseContentElement(...args)

避免引用未绑定的方法，这可能会在调用静态方法时导致意外范围界定“this”错误

Avoid referencing unbound methods which may cause unintentional scoping of `this` error when calling static methods

typescript

eslint

angular