ES6 Javascript:使用箭头函数从 类 调用静态方法

ES6 Javascript: Calling static methods from classes with arrow functions

虽然这按预期工作

class ClassWithStaticMethod {

  static staticMethod() {
    return ('staticMethod');
  };

  static staticMethod2() {
    const yee = this.staticMethod();
    return 'staticMethod2 '+yee;
  };

}

console.log(ClassWithStaticMethod.staticMethod2());
//staticMethod2 staticMethod

这是,

i) 可以使用 class 名称访问 staticMethod(),并且

ii) 此方法可以调用同一 class 中的另一个静态方法,方法是使用“this”,

这行不通

class ClassWithStaticMethod {

  static staticMethod = () => {
    return ('staticMethod');
  };

  static staticMethod2 = () => {
    const yee = this.staticMethod;
    return 'staticMethod2 '+yee;
  };

}

console.log(ClassWithStaticMethod.staticMethod2());
//staticMethod2 undefined

从某种意义上说,我仍然可以访问 staticMethod() 方法,但我无法访问第一个方法中的另一个方法。我变得不确定,如果我使用

    const yee = this.staticMethod();

我收到一个错误

error TypeError: _this.staticMethod is not a function

箭头函数从外部范围继承它们的 this 而不是它们的 this 取决于它们的调用上下文。由于 staticMethod2 试图访问 this.staticMethod,只有当 this 引用 ClassWithStaticMethod 时才有效——也就是说,如果 staticMethod2 标准函数,不是箭头函数。

您还需要调用 this.staticMethod()。 (const yee = this.staticMethod; 将导致 staticMethod 被强制转换为字符串,而不是被调用)

更改这两个问题,它按预期工作:

class ClassWithStaticMethod {

  static staticMethod = () => {
    return ('staticMethod');
  };

  static staticMethod2 = function() {
    const yee = this.staticMethod();
    return 'staticMethod2 '+yee;
  };

}

console.log(ClassWithStaticMethod.staticMethod2());

当涉及到一般用途时,这是箭头函数的一个怪癖:它们具有 this 的通用范围。 (这就是为什么如果您想要更好的调用堆栈,我们必须使用 function())。在第二种方法中,this 引用调用上下文:window.

如下评论所述,为了方便起见,不要使用简写语法;我们有这么多选择是有原因的。

要修复它,你可以使用function()来定义第二个函数;或 () 在对象案例中。

然而,这会起作用:

class ClassWithStaticMethod2 {

  static staticMethod = () => {
    return ('staticMethod');
  };

  static staticMethod2 = function() {
    console.log(this)
    const yee = this.staticMethod();
    return 'staticMethod2 '+yee;
  };

}

看看here