按下按钮时，Javascript简单类作用域会发生变化

Question

我确信这是基本问题之一。我正在创建一个自定义 Javascript 类，并在上面使用 Jquery 来做一些事情。检查文档是否准备好后，我调用 init() 并添加事件处理程序。但是，当我单击按钮时，我进入“turnLightOn”函数，但是当它尝试调用此类的另一个函数时，其范围已更改为“按钮”，因此我得到

Object #<HTMLButtonElement> has no method 'getDataFromServer' 

我知道这是一个简单的问题，但有人能为我指出正确的答案吗？

<div id="cp">
    <ul>
 <li><button id="light_switch">Light On</button></li>

    </ul>
</div>    

<div id="room"> 
</div>
<script type="text/javascript">
var CP = function(widget, light_switch){
    this.widget_name = widget;
    this.light_switch = light_switch;
    var self = this;
    console.log(this);
};
CP.prototype.init = function(){ 
    $("#"+this.light_switch).on('click', this.turnlighton);     
};
CP.prototype.somecallback = function(){
    console.log(this);
};
CP.prototype.turnlighton = function(){
    this.getDataFromServer(somecallback);
};
CP.prototype.getDataFromServer = function(callback){
    $.ajax({url:"/"+fname,
            success:function(result){
                 callback(result);
          }
    });
};    

$( document ).ready(function(){
        var c = new CP("control_panel", "light_switch");
        c.init();
    }   
);  
</script>

Answer 1

在点击处理程序中 this 默认情况下将引用点击的元素，您可以使用 Function.bind() 传递自定义上下文或$.proxy()

$("#" + this.light_switch).on('click', $.proxy(this.turnlighton, this));

演示:Fiddle