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

按下按钮时，Javascript简单类范围会更改

2 个答案: