用作事件處理函數的Javascript原型函數中'this'的值

我試圖在Javascript中使用原型繼承。我的代碼下面的問題是，當點擊按鈕並調用MyNamespace.MyObj.myEventHandler時，this的值不是MyNamespace.MyObj的實例，而是被單擊的按鈕。用作事件處理函數的Javascript原型函數中'this'的值

我的結構錯了嗎（有沒有更好的方法）？我可以以某種方式確保this是對象的實例而不是調用者按鈕嗎？

var MyNamespace.MyObj = function(myform) { 
    this.myform = myform; 
    jQuery('.mybutton', this.myform).click(this.myEventHandler); 
}; 

MyNamespace.MyObj.prototype = { 
    myEventHandler: function() { 
    this.myform.get(0).submit(); 
    } 
}; 

jQuery(document).ready(function() { 
    new MyNamespace.MyObj(jQuery('#myform')); 
});

這只是一個非常愚蠢的例子，我用它來學習原型繼承。我意識到上述代碼的實際功能可以簡單地在jQuery中完成，或者我可以使用對象文本或模塊模式 - 但我真的只是在學習原型繼承而不是在此時實現特定功能感興趣。

來源

2010-07-22 aw crud

有多種方式保存this價值，最簡單的IMO是：

var MyNamespace.MyObj = function(myform) { 
    var instance = this; // store `this` 
    this.myform = myform; 
    jQuery('.mybutton', this.myform).click(function() { 
    instance.myEventHandler(); // use the stored value 
    }); 
};

來源

2010-07-22 15:10:17 CMS

優秀 - 這項工程。這是一種常見的模式，或者可以/應該以這種不必要的方式構建我的代碼，同時達到相同的結果？ – 2010-07-22 15:18:14

@RenderIn：是的，我認爲這是常用的模式，雖然有[其他方式]（http://stackoverflow.com/questions/2025789/preserving-a-reference-to-this-in-javascript-prototype-functions ）... – CMS 2010-07-22 15:27:40

代理可能是要走的路：http://api.jquery.com/jQuery.proxy/ – 2010-07-22 16:08:18

如果你有進入*的ES5 Function.prototype.bind，你可以這樣做：

jQuery('.mybutton', this.myform).click(this.myEventHandler.bind(this));

的jQuery提供jQuery.proxy，它做同樣的事情，但語法不同：

jQuery('.mybutton', this.myform).click(jQuery.proxy(this.myEventHandler, this));

這兩種方法都與方法和對象一起工作，並返回一個將在該對象上調用該方法的函數。

當您在javascript中傳遞（或分配）一個方法時，它會從原始對象中切下。這只是你必須知道的其中一件事。（實際上，這與繼承工作是一樣的，方法從父項中切下，並在子項的上下文中調用。）

*說，通過es5 shim。

來源

2011-04-05 02:24:47

用作事件處理函數的Javascript原型函數中'this'的值

回答

相關問題