呼叫方法，通过事件宽度JS OOP（原型）

Question

我希望有人能帮助我=）

我尽量保持例子简单：

function myClass(){ 
//some Code 
} 

myClass.prototype.func1 = function(){ 
//some Code 
} 

myClass.prototype.func2 = function(){ 
    document.getElementById("myEl").onclick = function(){ 
     this.func1 //does not work, this is only the Element... 
    } 
} 

它是如何工作的调用FUNC1？我想绑定func2中的onclick事件。

Answer 1

首先，您必须保留对当前对象的引用。正如您已经注意到的，在事件处理程序中，this引用了DOM元素。你可以用

var self = this; 

其次做到这一点，你必须真正通话功能：

self.func1(); 

完整的示例：

myClass.prototype.func2 = function(){ 
    var self = this; 
    document.getElementById("myEl").onclick = function(){ 
     self.func1(); 
    }; 
} 

---

在你可以在新的浏览器还使用.bind()^[MDN]来明确定义什么this应参考（见MDN文档用于其他浏览器的垫片）：

document.getElementById("myEl").onclick = this.func1.bind(this); 

Answer 2

里面的onclick功能，this值绑定到被点击的元素。你需要保留一份副本（参考）到this FUNC2内：

myClass.prototype.func2 = function(){ 
    var self = this; //keep a reference to the this value 
    document.getElementById("myEl").onclick = function(){ 
     self.func1(); 
    } 
}