避免引用未绑定的方法，这可能会在调用静态方法时导致无意的 `this` 错误作用域

Question

我在as per this Stackoverflow question here 下面创建了一个方法映射来帮助我动态调用静态方法。但是，我一直遇到以下错误：

避免引用可能导致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

有一些选项可供您使用：

1. 为整个项目关闭此 lint 规则

2. 关闭此文件/代码块的 lint 规则

3. 绑定方法，因此它们不再是未绑定的

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

4. 使用箭头包装器绑定函数的最短时间

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