使用Websocket定义类

Question

我有一个关于JavaScript中类定义的基本问题。让我解释一下我的问题，下面是我的类(为了清晰起见，这是一个简化的版本):

var RemoteCursor = function(canvas_id) {
    this.ws_sendjoingroup = function() {
      console.log('Dummy log just for debug');
    }
    this.ws_cursor_onopen = function() {
      console.log('ws_cursor_on open: (debug)');
      this.ws_sendjoingroup();
    }
    this.ws_start_remote_cursor = function() {
        this.ws_remote_cursor = new WebSocket('ws://localhost/ws');
        this.ws_remote_cursor.onopen = this.ws_cursor_onopen;
    }
}

我在HTML页面中像这样调用这个类:

<script>
    window.onload = function() {
        var cursor1 = new RemoteCursor("usimage_cursor");
        cursor1.ws_start_remote_cursor();
    }
</script>

但是当onopen回调触发时，在函数ws_cursor_onopen中上下文是不同的，this没有任何定义，我得到了错误:

Uncaught TypeError: this。Ws_sendjoingroup不是一个函数!

typeof(this.ws_sendjoingroup)是undefined

我如何在我的RemoteCursor实例中传递函数作为onopen的回调?

Answer 1

尝试使用bind()，它有助于锁定这个的值。否则你可以稍微改变一下结构;

var RemoteCursor = function(canvas_id) {
  this.ws_sendjoingroup = ws_sendjoingroup;
  this.ws_cursor_onopen = ws_cursor_onopen;
  this.ws_start_remote_cursor = ws_start_remote_cursor.bind(this);
  function ws_sendjoingroup() {
    console.log('Dummy log just for debug');
  }
  function ws_cursor_onopen() {
    console.log('ws_cursor_on open: (debug)');
    ws_sendjoingroup();
  }
  function ws_start_remote_cursor() {
    this.ws_remote_cursor = new WebSocket('ws://localhost/ws');
    this.ws_remote_cursor.onopen = this.ws_cursor_onopen;
  }
}

另外，要非常清楚，在JavaScript中使用继承和OOP编程通常效果很差，并且对于更有经验的开发人员来说，这是一种不受欢迎的做法。你可以通过D. Crockford的精彩演讲《The Better Parts》了解更多。