ecmascript 6 - ES6 Javascript: Calling static methods from classes with arrow functions - Stack Overflow

admin管理员组

文章数量:1352803

While this works as intended

class ClassWithStaticMethod {

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

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

}

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

This is,

i) have access to the staticMethod() with the class name, and

ii) this method can call another static method within the same class by using "this",

This doesn't work

class ClassWithStaticMethod {

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

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

}

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

In the sense, that I can still access to the staticMethod() method, but I am not able to access to the other method within the first method. I get undefined, and if I use

    const yee = this.staticMethod();

I get an error

error TypeError: _this.staticMethod is not a function

While this works as intended

class ClassWithStaticMethod {

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

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

}

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

This is,

i) have access to the staticMethod() with the class name, and

ii) this method can call another static method within the same class by using "this",

This doesn't work

class ClassWithStaticMethod {

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

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

}

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

In the sense, that I can still access to the staticMethod() method, but I am not able to access to the other method within the first method. I get undefined, and if I use

    const yee = this.staticMethod();

I get an error

error TypeError: _this.staticMethod is not a function

• javascript
• ecmascript-6
• es6-class
• arrow-functions

Share Improve this question Follow edited Sep 11, 2018 at 6:33 Hyyan Abo Fakher 3,52733 gold badges2424 silver badges3636 bronze badges asked Sep 11, 2018 at 5:40 GWorkingGWorking 4,3411111 gold badges5757 silver badges9696 bronze badges 3

• That's one problem with arrow functions: they have generic scoping of this. (That's why we have to use function() if you want a better call stack). In the second method, this refers to the calling context: window. – weirdpanda Commented Sep 11, 2018 at 5:45
• @weirdpanda - That's not a problem with arrow functions. It's how they're designed and what there purpose is! If you want the regular method call behavior for this, then use a regular method call, not an arrow call. – jfriend00 Commented Sep 11, 2018 at 6:40
• @jfriend00, I am so sorry, my language was a little off there. – weirdpanda Commented Sep 11, 2018 at 6:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Arrow functions inherit their this from the outer scope rather than their this depending on their calling context. Since staticMethod2 tries to access this.staticMethod, that will only work if this refers to ClassWithStaticMethod - that is, if staticMethod2 is a standard function, not an arrow function.

You also need to invoke this.staticMethod(). (const yee = this.staticMethod; will result in the staticMethod being coerced to a string, rather than being called)

Change those two issues, and it works as expected:

class ClassWithStaticMethod {

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

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

}

console.log(ClassWithStaticMethod.staticMethod2());

That's one quirk with arrow functions when it es to general use: they have generic scoping of this. (That's why we have to use function() if you want a better call stack). In the second method, this refers to the calling context: window.

As mentioned below in the ment, do not use the short-hand syntax for your convenience; there is a reason we have so many options.

To fix it, you can just use function() to define the second function; or () in the object case.

This, however, would work:

class ClassWithStaticMethod2 {

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

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

}

Check it out here.

本文标签： ecmascript 6ES6 Javascript Calling static methods from classes with arrow functionsStack Overflow