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

Posted 2023-01-21

我目前正在实现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中使用过类，所以有点困惑。也许有人可以给我提示吗？

答案

有三个问题：

• 要引用对象的属性，请使用.，例如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);
    ;
  

另一答案

我已经找到了解决方案。因为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);
        ;