如何在JQuery回調函數中獲取對象引用？

Question

比方說，我們有一個名爲aObject JavaScript對象和測試（）函數用作回調函數的JQuery

var aObject = { 
    aVariable : 'whatever value', 
    test : function() { 
     // Trying to access property. But doesn't work as expected since I am getting the DOM element, not the aObject reference 
     var temp = this.aVariable; 
    } 
} 

var anInstanceOfAObject = $.extend({}, aObject); 

anInstanceOfAObject.someFunction = function() { 
    // I have to put "this" in a variable since "this" in the context below refers to the DOM element, not the instance of the object 
    var placeHolder = this; 
    $('some random div.element').theJavascriptFunction({ 
     "theJavascriptCallbackFunction": placeHolder.test, 
    }); 
} 

內部的測試（）函數中，「本」是的DOM正常範圍內元件。我的問題是如何引用aObject，因爲我們不能使用「this」來引用它。

編輯：我不知道如果上面的語法是正確的/首選的方式來實例化一個對象。我看到一些使用此語法的示例

var aObject = function() {.... 

請告知我，看起來這是否與問題有關。

Answer 1

你只需要換你的方法調用，以獲得正確this：當你只使用placeHolder.test作爲回調

anInstanceOfAObject.someFunction = function() { 
    var placeHolder = this; 
    $('some random div.element').theJavascriptFunction({ 
     "theJavascriptCallbackFunction": function() { placeHolder.test() } 
    }); 
} 

，你只是移交給test函數的引用和功能用DOM元素調用爲this。

您也可以嘗試bind：

anInstanceOfAObject.someFunction = function() { 
    var placeHolder = this; 
    $('some random div.element').theJavascriptFunction({ 
     "theJavascriptCallbackFunction": this.test.bind(this) 
    }); 
} 

Answer 2

這總是指的是dom元素。爲了得到與你需要的元素相關的jQuery對象，再次將它包裝到jquery中，所以$（this）或者jQuery（this）取決於你的設置。

Answer 3

如果你換一個jQuery函數調用.proxy $（函數，這一點），然後jQuery將解決您參考這個所以它的工作原理，你想要的方式。

首先，你的問題是正確的。但是，您的代碼無法正常工作，並且在解決問題時解決了問題。簡短的一課：如果您先調試問題代碼，您將學到更多東西！

---

下面我會提供這個問題，你說明的解決方案和更優雅的解決方案。

---

這裏是所討論的對象：

var aObject = { 
    aVariable : 'whatever value', 
    test : function() { 
     // Trying to access property. 
        //But doesn't work as expected since I am getting 
        //the DOM element, not the aObject reference 
     var temp = this.aVariable; 
     alert("temp=" + temp); 
    } 
} 

---

這是問題的一個示例：

var anInstanceOfAObject = $.extend({}, aObject); 
anInstanceOfAObject.someFunction = function() { 
    $(function() { 
     //The problem. 'this' is not set after calling the fn via jquery. 
     this.test(); 
    }); 
anInstanceOfAObject.someFunction(); 

---

這裏是你所編碼的溶液：

var anInstanceOfAObject = $.extend({}, aObject); 
anInstanceOfAObject.someFunction = function() { 
      // by saving this in placeHolder you solve the problem. Good! 
    var placeHolder = this; 
    $(function() { 
        // Your solution works. Here you pass forward your ref to this 
     placeHolder.test(); 
    }); 
} 
anInstanceOfAObject.someFunction(); 

---

最後這裏是一個稍微更優雅的回答：

var anInstanceOfAObject = $.extend({}, aObject); 
anInstanceOfAObject.someFunction = function() { 
    $(
     $.proxy(function(){ 
      // using $.proxy gets jquery to fix your this ref 
      this.test(); 
     },this) 

    ); 
} 
    anInstanceOfAObject.someFunction();