按钮被按下时，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

Answer 2

我发现这个问题：

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

在这个上面的代码this.turnlighton将在jQuery中采取当前on（）方法。你使用CP功能这个。

<script type="text/javascript"> 

var _this; 
var CP = function(widget, light_switch){ 
    this.widget_name = widget; 
    this.light_switch = light_switch; 
    _this = this; 
    console.log(this); 
}; 
CP.prototype.init = function(){ 
    $("#"+_this.light_switch).on('click', _this.turnlighton);  
}; 
CP.prototype.turnlighton = function(){ 
    console.log(this); 
    _this.getDataFromServer(); 
}; 
CP.prototype.getDataFromServer = function(){ 
    /*$.ajax({url:"/"+fname,success:function(result){ 
     console.log(result); 
    }});*/ 
};  

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

Fiddle