是否可以在ES6中的类的静态方法中访问变量和函数？

Question

Firstly the code that will explain my query

class myClass {
    constructor() {
        this.myVariable = 10; 
    }

    myFunctionCalledFromStaticFunction() {
        console.log (`myFunctionCalledFromStaticFunction myvariable is ${this.myVariable}`);
    }

    static staticMyFunctionTwo() {
        console.log (`staticMyFunctionTwo myvariable is ${this.myVariable}`);
        this.myFunctionCalledFromStaticFunction();
    }

    static staticMyFunction() {
        console.log (`staticMyFunction myvariable is ${this.myVariable}`);
        myClass.staticMyFunctionTwo();
    }

    myFunctionTwo() {
        console.log (`myFunctionTwo myvariable is ${this.myVariable}`)
        myClass.staticMyFunction();
    }

    myFunction() {
        console.log (`myFunction myvariable is ${this.myVariable}`)
        this.myFunctionTwo();
    }
}

(function ($) {
    'use strict';
         const helloClass = new myClass();
         console.log (`main myvariable is ${helloClass.myVariable}`)
       helloClass.myFunction();  
       myClass.staticMyFunctionTwo();
}(jQuery));

And, now a codePen example https://codepen.io/hellouniverse/pen/jYyYre

Now, a disclaimer I have to give. I have searched through stackoverflow, online and my own experience. I am quite certain it is not possible .

If you take the code and run it or check in the codepen, you will notice that myVariable is undefined in static functions. Also, I can not call a normal function from a static function.

Am I correct in this statements? Or is it possible or has a workaround?

Answer 1

I assume that you want to have accessible primitive data across the static and non-static methods. For such cases you would rather need to use Symbol or const .

How to use symbol you can read here: MDN Symbol

And your modified examples: using Symbol and using the const keyword

Answer 2

Looking at your codepen, the answer is no you cannot use this in a static function call, UNLESS you are calling another static method. As MDN points out, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static , you can have this

class Logger {
    static error(message) {
        this.log(message, 'error');
    }

    static log(message, level) {
        console[level](message);
    }
}

Answer 3

You have to understand what a class method desugars to. Consider

class Foo {
  static bar () {
    console.log(this.fooProp);
  }
};

Is more-or-less the same as this:

function Foo() {};
Foo.bar = function () { console.log(this.fooProp); };

Note that it isn't Foo.prototype.bar . Functions are Objects in JavaScript, and just like any other object when you call a method of an object (eg Foo.bar() ) then this is set to the object it is called on (eg the function 'Foo', not an instance of Foo). I can say

Foo.fooProp = 3;
Foo.bar(); // logs 3

Without ever actually creating an instance of Foo. I can also call it from an instance

let foo = new Foo();
foo.constructor.bar(); // logs 3

But the this value will always refer to the class/constructor rather than the instance

foo.fooProp = 5;
foo.constructor.bar(); // still 3

Unless one does something like this:

Foo.bar.call(foo); // now it's 5