面向对象的Javascript中的JQuery小部件事件

Question

我正在尝试编写一个自定义小部件，并且我想在我正在编写的类中使用现有的UI小部件。问题是，当一个事件触发时，被调用的类方法似乎超出了该类的其余部分，因为我尝试读取的任何成员都是未定义的。下面是代码：

<script type="text/javascript"> 
MyClass = function() 
{ 
    this.init(); 
} 

$.extend(MyClass.prototype, 
    { 
     init: function() 
     { 
      this.field = 'Hello world.'; 

      /* Let's try using a slider. */ 
      this.slider = $("#slider"); 

      this.slider.slider(
       { 
        change: this.callback, 
        min: 270, 
        max: 800, 
        slide: this.callback 
       } 
      ); 
     }, 

     callback: function() 
     { 
      alert(this.field); 
     } 
    } 
); 
</script> 

<div id="slider"></div> 
<script type="text/javascript"> 
var myClass = new MyClass(); 
</script> 

这是问题简单化，我已经尝试了一些方法来解决这个问题，如使用bind，而不是回调符号：

this.slider.bind('slidechange', this.callback(this)); 
this.slider.bind('slide', this.callback(this)); 

然而，这只会导致回调被调用，尽管事件发生。

谢谢。

Answer 1

见http://www.alistapart.com/articles/getoutbindingsituations/的方法上结合this，使用闭

编辑： 作为如何可以做到这一点的具体例子...

$.extend(MyClass.prototype, 
{ 
    init: function() 
    { 
     this.field = 'Hello world.'; 

     /* Let's try using a slider. */ 
     this.slider = $("#slider"); 

     this.slider.slider(
      { 
       change: this.callback(this), 
       min: 270, 
       max: 800, 
       slide: this.callback(this) 
      } 
     ); 
    }, 

    callback: function(that) 
    { 
     return function() { 
      alert(that.field); 
     } 
    } 
} 
);