匿名事件处理程序无法访问原型方法

Question

无法从匿名函数处理程序中的fx2访问fx1？

var MyComponent = function() { 
    //my constructor 
} 

MyComponent.prototype.fx1 = function() { //code } 

MyComponent.prototype.fx2 = function() { 

    var btn1 = document.getElementById('Button1') 

    btn1.onclick = function() { 
     //issue is here 
     //trying to call fx1 from here but can't access it. 

     this.fx1(); //doesn't work. 
    } 
} 

Answer 1

由于this绑定到onclick处理程序中的按钮，你不能用它来访问MyComponent实例。但是，你可以简单地保存在另一个变量引用您然后可以使用：

MyComponent.prototype.fx2 = function() { 
    // save reference to the instance 
    var self = this; 

    var btn1 = document.getElementById('Button1') 
    btn1.onclick = function() { 
     // access the saved reference to the MyComponent instance 
     self.fx1(); 
    } 
} 

Answer 2

另一种方式来做到这一点：

MyComponent.prototype.fx2 = function() { 
    var btn1 = document.getElementById('Button1'); 
    btn1.onclick = (function() { 
     this.fx1(); 
    }).bind(this); 
}