Сохранение этого объекта в пользовательской частной переменной

Question

У меня есть этот объект JS

var toggleItem = { 

    attrData : '', 
    toggleNew : '', 
    toggleOld : '', 
    //var self : this, 

    init : function(){ 

    self = this; 
    self.listener(); 
    }, 

    listener : function(){ 

    jQuery('.btn-save').click(function(){ 
     var current = this.id.split('_').pop(); 
     self.toggleNew = jQuery('.toggle-data-new_'+current).val(); 
     self.toggleOld = jQuery('.toggle-data-old_'+current).val(); 
     self.updateForm(); 
    }); 
    }, 

    updateForm : function(){ 

    jQuery('#toggle-product-form #new').val(self.toggleNew); 
    jQuery('#toggle-product-form #old').val(self.toggleOld); 
    jQuery('#toggle-product-form').submit(); 
    }, 

} 

В прошлом я часто сталкивался вопрос о this стоимости получения изменен на любой элемент, который я ссылку с jQuery. В этом случае я хотел бы хранить this в новой переменной с именем self. Но важно, чтобы self не стал доступен по всему миру.

Вы увидите в верхней части объекта, где я написал //var self : this,, теперь закомментирован. Это связано с тем, что размещение var перед ним делает эту ошибку - Unexpected identifier в консоли. Но если я удалю часть var, я остаюсь с той же проблемой, что и сейчас, разместив ее в функции init (она глобальная).

Вопрос Я хочу, чтобы он был доступен для всего, что находится внутри объекта, и ничего снаружи?

Независимо от того, какое решение работает, я также планирую применить к другим трем переменным, указанным в верхней части.

NB Я знаю, что я мог бы использовать имя объекта вместо себя и оставить этот глобальный с относительно небольшим риском его конфликта с чем-то другим, но я уверен, значение this, сохраняя его доступным только (в его текущей форме) из объекта toggleItem.

Answer 1

Я буду следовать рекомендациям Майка, но пройдите полный маршрут шаблона модуля. Это позволит вам иметь «частные» функции, а также в случае, если вы хотите собрать какие-либо общие функции.

С этим решением я не вижу необходимости в переменной self, если у вас нет чего-то другого, с которым вы не делились. Инкапсуляция , предоставленная здесь, хранит все собранные вместе внутри одной функции, и у вас нет всех других функций, видимых на вашем объекте (что является шагом вперед от броска всего в глобальную область, но вы можете принять это дальнейший шаг).

var toggleItem = (function() { 
    var self = this, 
     attrData, 
     toggleNew, 
     toggleOld, 
     init, 
     listener, 
     updateForm; 

    init = function() { 
     // This will call the "listener" function without the need for 
     // "self", however you can specify it if you want to. 
     listener(); 
    }; 

    listener = function() { 
     jQuery('.btn-save').click(function() { 
      var current = this.id.split('_').pop(); 

      // Again, you shouldn't need "self", but add it 
      // if it will ease your mind. 
      toggleNew = jQuery('.toggle-data-new_' + current).val(); 
      toggleOld = jQuery('.toggle-data-old_' + current).val(); 
      updateForm(); 
     }); 
    }; 

    updateForm = function() { 
     jQuery('#toggle-product-form #new').val(self.toggleNew); 
     jQuery('#toggle-product-form #old').val(self.toggleOld); 
     jQuery('#toggle-product-form').submit(); 
    }; 

    return { 
     init: init 
     // Add the other functions if you need to access them from outside 
     // the script here, but from what you showed, you should be fine 
    } 
}()); 

Answer 2

Вам нужна только самооценка в вашей функции listener. Попробуйте сделать это:

var toggleItem = { 
    // all your other stuff... 
    listener: function() { 
    var self = this; 
    jQuery('.btn-save').click(function(){ 
     var current = this.id.split('_').pop(); 
     self.toggleNew = jQuery('.toggle-data-new_'+current).val(); 
     self.toggleOld = jQuery('.toggle-data-old_'+current).val(); 
     self.updateForm(); 
    }); 
    } 
}; 

Edit: В качестве альтернативы, вы можете изменить все ссылки на self на toggleItem, так что это действительно то, что вы пытаетесь получить доступ. Если вы хотите объявить self один раз, не помещая его в глобальную область, вы можете использовать очень шаблон модуля.

var toggleItem = (function() { 
    var self = { 
    // other stuff... 
    listener: function() { 
     jQuery('.btn-save').click(function(){ 
     var current = this.id.split('_').pop(); 
     self.toggleNew = jQuery('.toggle-data-new_'+current).val(); 
     self.toggleOld = jQuery('.toggle-data-old_'+current).val(); 
     self.updateForm(); 
     }); 
    } 
    }; 
    return self; 
})(); 

Это создает замкнутую сферу, так self не просочиться, и это сразу же вызывает функцию так toggleItem присваивается значение, возвращаемое функцией.

Answer 3

В будущем, чтобы переменные члена были приватными, вы можете использовать closure. Это предотвратит утечку переменной в глобальную область.

function toggleItem() { 
    var self = this, 
    attrData = '', 
    toggleNew = '', 
    toggleOld = ''; 

    function init(){ 
    self.listener(); 
    } 

    function listener(){ 
    jQuery('.btn-save').click(function(){ 
     var current = this.id.split('_').pop(); 
     self.toggleNew = jQuery('.toggle-data-new_'+current).val(); 
     self.toggleOld = jQuery('.toggle-data-old_'+current).val(); 
     self.updateForm(); 
    }); 
    } 

    function updateForm(){ 
    jQuery('#toggle-product-form #new').val(self.toggleNew); 
    jQuery('#toggle-product-form #old').val(self.toggleOld); 
    jQuery('#toggle-product-form').submit(); 
    } 

    return init; 
} 

var toggle = toggleItem(); 
toggle.init();