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

Question

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

javascriptecmascript-6es6-classarrow-functions

6

尽管这样操作能达到预期的效果。

class ClassWithStaticMethod {

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

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

}

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

这是，

i) 使用类名可以访问staticMethod()方法，

ii) 这个方法可以使用"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();

我遇到了一个错误

错误信息：TypeError: _this.staticMethod 不是一个函数

- GWorking

箭头函数的一个问题是它们具有通用的this作用域。(这就是为什么如果你想要更好的调用堆栈，我们必须使用function()。)在第二种方法中，this指的是调用上下文：window。 - weirdpanda

@weirdpanda - 这不是箭头函数的问题。这就是它们的设计和目的！如果你想要this的常规方法调用行为，那么请使用常规方法调用，而不是箭头调用。 - jfriend00

@jfriend00，非常抱歉，我的措辞有点不当。 - weirdpanda

2个回答

2

这里是关于箭头函数在一般使用时的一个怪异之处：它们具有通用的this作用域。（这就是为什么如果你想要更好的调用堆栈，我们必须使用function()）。在第二种方法中，this指的是调用上下文：window。

正如下面的注释所提到的，不要为了方便而使用简写语法；我们有这么多选项是有原因的。

为了解决这个问题，你可以使用function()来定义第二个函数；或者在对象的情况下使用()。

然而，这样做是可以工作的：

class ClassWithStaticMethod2 {

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

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

}

Check it out here.

- weirdpanda

正如我之前所说，这不是箭头函数的“问题”。这就是它们的设计初衷和主要用途。有些人会有点疯狂，试图在任何地方都使用更短的语法，即使箭头函数的主要功能不是所需的行为。那只是一种错误的模式。当您希望this值是词法作用域时，应使用箭头函数，而不是从对象.方法中获取它时。必须为适当的工作使用适当的工具。我建议您重新组织您的答案，更符合这些思路。 - jfriend00

我曾经看到Eran Hammer写的一段代码，他使用function而不是() => {}。有人问他为什么这样做，他的原因正是你所说的。在另一个讲座中，我听说使用... = function()的原因是因为() => {}会形成匿名函数，导致堆栈跟踪时无法识别。我的回答措辞有误，我将进行更正！ - weirdpanda

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CertainPerformance · Accepted Answer

箭头函数继承它们的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());