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

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?

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?

• javascript
• ecmascript-6

• 3 this doesn’t point to an instance of your class so you that’s why you can’t know the value of a variable that’s only available in an instance. – Kokodoko Commented Dec 27, 2017 at 0:27
• 2 The same class can be re-used 100 times(instances). Each time myVariable can have a different value. A static must always be the same across all instances, therefor it would be impossible for a static method to use a non static variable because it can be different values at the same time. So what you want is static variables, which is possible but you'll need a workaround in JavaScript(out of scope for this question) – René Commented Dec 27, 2017 at 0:35
• 1 Here's a sanity check. Given that myVariable is not constant but depends on the instance like this.myVariable = Math.random(), what would you expect it to be equal to in static method?.. – Estus Flask Commented Dec 27, 2017 at 5:02
• Inaccessible. So that would be undefined in JavaScript terms. Which value it in reality is should not matter to how you code your program. – René Commented Dec 27, 2017 at 13:00

3 Answers 3

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

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/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);
    }
}

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 (e.g. Foo.bar()) then this is set to the object it is called on (e.g. 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