Question

我有一个名为ShippingUI的JavaScript对象：

function ShippingUI(){
   ...
}

它有几种方法：

ShippingUI.prototype.UpdateItemQTYs = function(ItemJQOBJ, NewQTY)
{
   ...
}

ShippingUI.prototype.EH_SortableRecieve = function(event, ui)
{
    ...
}

“EH_SortableRecieve（）”函数是一个放置事件处理程序。当它运行时，它需要调用“UpdateItemQTYs（）”，这是同一对象中的姐妹函数。我正在尝试使用：

ShippingUI.prototype.EH_SortableRecieve = function(event, ui)
{
    this.UpdateItemQTYs('ABCD',123);
}

但不断收到错误：

 "this.UpdateItemQTYs is not a function"

我猜这个“这个”指的是其他东西......所以如何才能得到“真实的”“这个”？

事件绑定方法：

// Takes a Jquery Object and makes it sortable with our custom options
   this.MakeSortable = function(JQOBJ)
   {
     JQOBJ.sortable({
       connectWith: '.connectedSortable',
       items: '.ItemLineWrapper',
       dropOnEmpty: true,
       axis: 'y',
       receive: this.EH_SortableRecieve       
       });
   }

Answer 1

您的示例中缺少某些内容，即调用EH_SortableRecieve的方式。但根据你说的应该使用它，因为我认为它是这样的：

htmlelement.onmouseup = shippingObject.EH_SortableRecieve;

在这种情况下，您应该了解Javascript在方法中对this的绑定。在特定情况下，事件处理程序this绑定到window对象而不是方法所属的对象。这是javascript的一般特性：方法可以在运行时重新绑定。换句话说，对象可以窃取其他对象的方法。例如，我可以让我的对象slebetmans_object窃取您的方法并使用以下内容重新绑定其this：

shippingObject.EH_SortableRecieve.apply(slebetmans_object,parameters);

有几种策略可以解决这个问题。您可以使用闭包捕获对象：

htmlelement.onmouseup = function(){ shippingObject.EH_SortableRecieve() };

您可以在对象的构造函数中使用闭包来捕获对象的正确引用：

function ShippingUI () {
    var self = this; // since self is resolved at the time the object is created
                     // it always reference to the "correct" object

    this.EH_SortableRecieve = function(event, ui)
    {
        self.UpdateItemQTYs('ABCD',123);
    }
}

可能有其他方法可以做到这一点，但这些是我个人最常用的两种方式。

Answer 2

问题在于，当您将函数注册为事件处理程序时，它与对象的关系将丢失。

您是如何注册事件处理程序的？如果是jQuery，你可以使用新的“代理”API：

$('#someButton').click($.proxy(myShippingUI, 'EH_SortableReceive'));

这将确保对象（我使用“myShippingUI”作为您的类的示例实例）充当“this”指针。还有其他方法可以做到这一点，但这很简单。

“$ .proxy”是1.4的新功能。

Answer 3

function ShippingUI(){
   ...
}

ShippingUI.prototype = {
UpdateItemQTYs : function(ItemJQOBJ, NewQTY)
{
   ...
},
that = this,
EH_SortableRecieve = function(event, ui)
{

that.UpdateItemQTYs('ABCD',123);
    ...
}
};

以上内容也应该有效...您只需要参考当前正在使用的ShippingUI对象。

OO JavaScript：访问同一对象的另一个方法？

3 个答案: