匿名事件處理程序無法訪問原型方法

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); 
}