Доступ к переменным плагина jquery-ui из функции внутри плагина?

Question

У меня есть плагин для тегов, который я перефразирую.

Я продолжаю обходить объект, который я создаю каждый раз. Поэтому вместо этого у меня теперь есть функция, передающая значения и возвращающая объект. Это прекрасно работает, но теперь мне нужен доступ к одной из переменных в плагине.

Если вы посмотрите на дне вы увидите внутри _addTag я сделать вызов this.tag и я хочу, чтобы сохранить количество элементов в tagArray, но мой призыв к this не вызывает виджет.

(function ($) { 
    $.widget("ui.tagit", { 

     // default options 
     options:{}, 

     //initialization function 
     _create:function() { 

      var self = this; 
      this.tagsArray = []; 
      ... 

      ... 
      this._addTag('label', 'value'); 

      } 

     }, 


     _addTag:function (label, value) { 
      ... 

      //THIS IS WHERE THE TAG OBJECT IS CREATED 
      var tag = new this.tag(label, (value === undefined ? label : value)); 
      tag.element = $('<li class="tagit-choice"' 
       + (value !== undefined ? ' tagValue="' + value + '"' : '') 
       + '>' + label + '<a class="tagit-close">x</a></li>'); 
      ... 
     }, 

     tag: function (label, value, element) { 
      var self = this; 
      return { 
       label:label, 
       value:value, 
       element:element, 
       index: self.tagsArray.length 
      } 
     } 

    }); 
})(jQuery); 

вызова this вместо этого:

$.widget.tag 
__proto__: Object 
constructor: function (label, value, element) { 
__proto__: Object 

Answer 1

Использование new ключевого слова в JavaScript, чтобы вызвать функцию вызывает его с его контекстом (this) установлен на вновь созданный объект.

В вашем примере внутри tag функции вы ожидаете this быть установлен на объект виджета вы работаете, но вместо этого он будет установлен на вновь созданный объект из-за использованием new ключевого слова. Следовательно, он не сработает на self.tagsArray.length, потому что только что созданный объект не имеет свойства tagsArray.

Для получения дополнительной информации по ключевому слову new «Я рекомендую прочитать статью MDN на нем - https://developer.mozilla.org/en/JavaScript/Reference/Operators/new.