OO JavaScript: доступ к другому методу того же объекта?

Question

У меня есть объект JavaScript с именем ShippingUI:

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, который вы сейчас используете в этом.