如何在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();