Question

如何在类内部调用其自身的方法？

2020-03-27

108

javascript class

我目前正在实现 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);
        };
    }
}