在原型方法内访问匿名 function 内的实例变量

Question

这实际上是我上一个问题的后续问题， Access instance variable inside a function in javascript? .

我想在原型方法中访问匿名 function 中的实例变量。

function MyObject(){

     //Instance variables
     this.handler;

}
//Methods
MyObject.prototype.enableHandler = function(){
    var button = document.getElementById('button');
    button.onclick = function(){
         this.handler();//Is not working
    }
}
var myObject = new MyObject();
myObject.handler = function(){
    alert('Hello World!');
}
myObject.enableHandler();

JSFiddle http://jsfiddle.net/3cmvZ/

上面的示例只是为了阐明如何在原型方法中访问匿名 function 中的实例变量。 我已经知道button.onclick = this.handler有效。

Answer 1

问题不在于匿名 function 在原型中，而在于它是一个事件处理程序（不作为方法调用）。

问题是在您的 onclick 处理程序中， this关键字绑定到windows object，而不是设置原型的myObject实例。 您可以将 object 存储在that变量中并创建一个闭包：

function MyObject(){

     //Instance variables
     this.handler;

}
//Methods
MyObject.prototype.enableHandler = function(){
    var button = document.getElementById('button');
    var that = this;
    button.onclick = function(){
         that.handler();//Should be working
    }
}
var myObject = new MyObject();
myObject.handler = function(){
    alert('Hello World!');
}
myObject.enableHandler();

Answer 2

this.handler不在同一个 scope 中。 您需要将其声明为：

MyObject.prototype.enableHandler = function() {
    var button = document.getElementById("button");
    button.onclick = this.handler;
}

由于您只是直接调用事件，因此无需将其包装在另一个 function 中。

根据您的评论更新：

MyObject.prototype.enableHandler = function() {
    var button = document.getElementById("button");
    var $this = this;

    button.onclick = function() {
        $this.handler();
    }
}

您需要创建一个与匿名 function 位于同一 scope 中的局部变量。