访问prototype方法内的匿名函数内的实例变量

时间:2011-07-04 16:29:22

标签: javascript oop

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

我想访问prototype方法中的匿名函数内的实例变量。

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/

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

2 个答案:

答案 0 :(得分:3)

问题不在于匿名函数在原型中,而在于它是一个事件处理程序(不作为方法调用)。

问题在于,在您的onclick处理程序中,this关键字绑定到windows对象,而不绑定到设置原型的myObject实例。您可以将对象存储在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();

答案 1 :(得分:2)

this.handler不在同一范围内。您需要将其声明为:

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

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

根据您的评论

更新

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

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

您需要创建一个与匿名函数在同一范围内的局部变量。