Блог

У меня есть основной вопрос об определении класса в 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 ничего не определено, и я получил ошибку:

Неперехваченная ошибка типа: this.ws_sendjoingroup не является функцией!

Typeof(this.ws_sendjoingroup) не определен

Как я могу передать функцию внутри моего экземпляра RemoteCursor в качестве обратного вызова для onopen ?

Попробуйте использовать 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 обычно заканчивается плохо и несколько неодобрительно относится к практике более опытных разработчиков. Вы можете узнать больше об этом из замечательного доклада Д. Крокфорда, лучшие части здесь .