我有这个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函数(它是全局函数)中,会遇到与现在相同的问题。

问题我希望它可以用于对象内部的所有内容,而不能用于外部的任何内容吗?

无论采用哪种解决方案,我都打算将其应用于顶部声明的其他三个变量。

注意:我知道我可以使用对象的名称代替自己的名称,并且使此全局变量与其他对象冲突的风险相对较小,但是我敢肯定,必须有一种方法重新分配this的值,而使其只能从toggleItem对象中以其当前形式访问。

最佳答案

我会遵循Mike的建议,但要走完整的Module模式路线。如果您想收集任何常用功能,这也将使您具有“专用”功能。

使用此解决方案,除非您有其他未共享的内容,否则我认为不需要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
    }
}());

07-24 09:50
查看更多