如何在类内从自身调用方法？

Question

I'm currently implementing a WebSocket. Because I want to reconnect when the connection get's closed, I've implemented a connect() function and tried to call it inside the close event from itself but unfortunately it's not working:

class WebSocket {
    constructor( options = {} ) {
        this.url = "ws://localhost:8181";

        this.connect();
    }

    connect() {
        let ws = new WebSocket( this.url );

        ws.onclose = function ( event ) {
            console.log( `WebSocket connection to ${ this.url } failed: ${ event.reason }` );

            setTimeout( function () {
                connect();
            }, 5000 );
        };
    }
} 

The thrown error is:

Uncaught ReferenceError: connect is not defined

I've never worked with classes in JavaScript so I'm a bit confused. Maybe someone can give me a hint?

Answer 1

There are three issues:

• To reference a property of an object, use . , eg obj.prop . Here, the object on which a property you want to reference is the instance, this .
• You need to make sure this refers to the class instance inside the setTimeout , so use arrow functions
• The WebSocket class name clashes with the lexically scoped globalThis.Websocket property - name your class something else:

class Connector {
  constructor(options = {}) {
    this.url = "ws://localhost:8181";
    this.connect();
  }
  connect() {
    const ws = new WebSocket(this.url);
    ws.onclose = (event) => {
      console.log(`WebSocket connection to ${ this.url } failed: ${ event.reason }`);
      setTimeout(() => {
        this.connect();
      }, 5000);
    };
  }
}

Answer 2

I've found the solution. Because this refers to ws.onclose , I need to safe this instantly at the top of my function:

class Connector {
    constructor(options = {}) {
        this.url = "ws://localhost:8181";
        this.connect();
    }
    connect() {
        const ws = new WebSocket(this.url),
              self = this;

        ws.onclose = (event) => {
            console.log(`WebSocket connection to ${ this.url } failed: ${ event.reason }`);
            setTimeout(() => {
                self.connect();
            }, 5000);
        };
    }
}