Связанный клик теряет контекст моего класса.JS

Question

У меня есть проблема, которую я, вероятно, понимаю, но не знаю, как ее решить, если есть способ.

У меня есть упрощенный класс:

function DrawingTable(canvas_id){
  this.canvas_id = canvas_id;
  bind_events()

  function bind_events(){
  $(get_canvas()).click(function(e){
    var canvas = get_canvas() //works
    do_something_in_the_instance_who_called_click()
  }

  function get_canvas(){return document.getElementById(canvas_id)}

  function do_something_in_the_instance_who_called_click(){ 
    alert(this.canvas_id) //fail!
  }

}

Потому что когда click () вызывается для того, что выглядит , это больше не находится внутри экземпляра, но мне нужно изменить атрибуты оттуда ... есть ли способ, учитывая, что это может быть несколько экземпляров ?

Я действительно не знаю, как работает get_canvas ():)

Я использую jQuery, но, вероятно, не имеет отношения к делу

Answer 1

Это происходит потому, что вы вызываете функцию без какого-либо контекста объекта , но вы можете сохранить значение this:

function DrawingTable(canvas_id){
  var instance = this;  // <-- store `this` value

  this.canvas_id = canvas_id;
  bind_events()

  function bind_events(){
  $(get_canvas()).click(function(e){
    // Note also that here the `this` value will point to the 
    // canvas elemenet, `instance` should be used also

    var canvas = get_canvas();
    do_something_in_the_instance_who_called_click();
  }

  function get_canvas(){return document.getElementById(canvas_id)}

  function do_something_in_the_instance_who_called_click(){ 
    alert(instance.canvas_id); // <-- use stored `this` value
  }

}

Значение this неявно устанавливается при вызове функции, например:

obj.method();

Значение this будет указывать на obj, если вы выполняете вызов функции без какого-либо базового объекта , например ::

myFunction();

Значение this внутри myFunction будет указывать на глобальный объект.