How to acces to parent object in event listener?

Question

I need to access the parent object (not window) into an event listener.

Actually I get window with self, and the WebSocket object (event listener target) with this. I want to get the ScratchCloud object (parent).

Here is the JS code:

var ScratchCloud = function(url, user, project) {
  "use strict";
  this.socket = new WebSocket(url); // Create socket

  this.ws_status = function() {
    var status = this.socket.readyState;
    var message = "Scratch Cloud Data Socket (";
    switch (status) {
      case 0:
        message += "Connecting";
      case 1:
        message += "Open";
      case 2:
        message += "Closing";
      case 3:
        message += "Closed";
    }
    message += ")"
    return message;
  }

  this.ws_log = function(message, func, symbol) {
    if (!func) {
      func = console.log;
    }
    if (symbol) {
      func(this.ws_status(), symbol, message);
    } else {
      func(this.ws_status() + ":", message);
    }
  };

  this.ws_open = function(event) {
    console.log(self === window);
    self.ws_log();
    var handshake = {
      method: "handshake",
      user: user,
      project: project
    };
    handshake = JSON.stringify(handshake) + "\n";
    self.ws_log(handshake, null, ">>");
    event.target.send(handshake);
    self.ws_log();
  }

  this.ws_error = function(event) {
    this.ws_log(console.error, event, ">>");
  };

  this.ws_message = function(event) {
    this.ws_log(console.log, event, ">>");
  };
  this.ws_close = this.ws_message;

  this.socket.onopen = this.ws_open;
  this.socket.onerror = this.ws_error;
  this.socket.onmessage = this.ws_message;
  this.socket.onclose = this.ws_close;
};
new ScratchCloud("wss://clouddata.scratch.mit.edu/", "<user-name>", "<scratch-project>");

How to access the ScratchCloud instance in the ws_open function? I searched about this and self but I can't find anything.

Have you tried `const ScratchCloud = this;` after `"use strict"` and then referencing it that way from `ws_open`? — chiliNUT, Feb 27 '22 at 02:35

Vijay Kumar · Answer 1 · 2022-02-27T04:05:23.317

Here, the problem is this. First, you have learned about this in JS. When you invoke the function with self it is not working and accessing the window object. And when you use this then, you are calling WebSocket object. Right?

If you want to make this to use ScratchCloud function, you have to bind the this explicitly with ScratchCloud function. The following resources will help you understand explicit binding in JS:

Hope the above will help you.

How to acces to parent object in event listener?

1 Answers1