Error while setting the value of a global private class property in javascript

Question

I have a code in which I declare a private class member using "#" and then initialize it in the constructor and then when I try to set / access the value I get the following error

Uncaught TypeError: Cannot read private member #mouse from an object whose class did not declare it
    at mouseDownEvent

where the mouseDownEvent is the function, where I try to access the values

code example: ( refer to the EDIT code )

class Testing
{
   #property;
   constructor()
   {
      this.#property = new Vector2();
   }

   mouseDownEvent()
   {
      this.#mouse.x = somevalue; <- error is here
   }
}

EDIT

class Testing
{
   #mouse;
   constructor()
   {
      this.#mouse= new Vector2();
   }

   mouseDownEvent()
   {
      this.#mouse.x = somevalue; <- error is here
   }
}

Is the above code snippet correct? You have declared and initialized `#property`, but setting `#mouse` in the function. — Udith Gunaratna, Sep 10 '21 at 11:32
@UdithGunaratna yes, this is the official raycaster code: https://threejs.org/docs/#api/en/core/Raycaster after initializing in the constructor, the mouse.x and mouse.y both have value 0, and it works if i try to set the value in the contructor but as soon as i try to do it from outside of the constructor ( from a function of the same class ) it gives me an error also, it should be valid, shouldn't it be cause it's a global property? — Pratik Hadawale, Sep 10 '21 at 11:35
No, what I meant was, in your above code, you haven't declared the `#mouse` property. (like you have declared the `#property`) — Udith Gunaratna, Sep 10 '21 at 11:38
my bad, it's #mouse in my original code i just messed up while typing it here, i'll edit it out as a new section. Gimme a minute It also produces the same error, if i initialize the #mouse, in the global scope, outside of the constructor — Pratik Hadawale, Sep 10 '21 at 11:39
@UdithGunaratna i have attached the mousedownEvent() to mousedown event click so i call the "mouseDownEvent()" using ->> window.addEventListener("mousedown", mouseDownEvent(), false) — Pratik Hadawale, Sep 10 '21 at 11:48
Then you may need to bind `mouseDownEvent()` to this instance, like `window.addEventListener("mousedown", mouseDownEvent.bind(this)(), false)` — Udith Gunaratna, Sep 10 '21 at 11:54
@UdithGunaratna Hey thanks for your help, i did as you said and it works now. Do you wanna put the last comment of yours as reply, so i can mark it as answer. Also i would really appreciate if you could point me towards some materail that i can read in order to understand why this was happening Please and Thank You! — Pratik Hadawale, Sep 10 '21 at 12:27
I added the above as a separate answer and also added a reference to read further about JS bind(). Please accept it as the answer. — Udith Gunaratna, Sep 12 '21 at 16:41

Udith Gunaratna · Accepted Answer · 2021-09-12T16:38:16.380

Since you are passing the mouseDownEvent function to an event listener, the value of this will not be this Testing instance when it is actually invoked. So you need to bind it to this instance when passing it to the event handler as below.

window.addEventListener("mousedown", mouseDownEvent.bind(this)(), false)

You can read further about Javascript bind() from below link. https://www.javascripttutorial.net/javascript-bind/

Error while setting the value of a global private class property in javascript

1 Answers1