在原型方法內訪問匿名 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 中的局部變量。