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

Question

我目前正在实现一个 WebSocket。因为我想在连接关闭时重新连接，所以我实现了一个connect()函数并尝试在 close 事件中从它本身调用它，但不幸的是它不起作用：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 );        };    }} 抛出的错误是：Uncaught ReferenceError: connect is not defined我从来没有在 JavaScript 中使用过类，所以我有点困惑。也许有人可以给我一个提示？

Answer 1

存在三个问题：

• 要引用对象的属性，请使用.，例如obj.prop。在这里，您要在其上引用属性的对象是实例，this。

• 您需要确保this引用内部的类实例setTimeout，因此使用箭头函数

• WebSocket类名与词法范围属性冲突globalThis.Websocket- 将您的类命名为其他名称：

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

我找到了解决方案。因为this引用ws.onclose，我需要在我的函数顶部立即保护它：

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

        };

    }

}