绑定点击会丢失我的班级的上下文。 JS

时间:2010-06-15 14:10:07

标签: javascript oop javascript-events

我有这个问题,我可能理解,但如果有办法,不知道如何处理。

我有一个简化的课程:

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但可能不相关

1 个答案:

答案 0 :(得分:3)

这是因为您在没有任何对象上下文的情况下调用该函数,但您可以存储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值将指向全局对象。