訪問原型方法內的匿名函數內的實例變量

Question

這實際上是對我之前的問題Access instance variable inside a function in javascript?的後續問題。

我想訪問原型方法內的匿名函數內的實例變量。上述

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的作品。

Answer 1

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

你需要做一個局部變量是在同一範圍內的匿名函數。

Answer 2

問題不在於匿名函數在原型中，而在於它是一個事件處理程序（不作爲方法調用）。

問題是，在您的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();