最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin4浏览0评论

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

Share Improve this question edited Sep 11, 2018 at 6:33 Hyyan Abo Fakher 3,5273 gold badges24 silver badges36 bronze badges asked Sep 11, 2018 at 5:40 GWorkingGWorking 4,34111 gold badges57 silver badges96 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

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.

发布评论

评论列表(0)

  1. 暂无评论