Javascript 如果侦听器函数使用局部变量，如何在其他地方编写它？

我是Javascript开发的初学者，我必须做经典的待办应用程序。它必须是面向对象的，我的程序有两个类：Task和Tag。 任务包含一些标记

当用户单击标记时，他可以修改其名称。首先，我确实编写了一个匿名回调函数，该函数正在侦听修改表单提交，并且运行良好。但是，我必须创建一个在其他地方声明的命名函数，而不是我现有的侦听器。但是，我需要访问我的对象（已编辑）的一些属性，我完全不知道如何做这样的事情

以下是我代码的一小部分：

  module.Tag = class Tag {
      constructor(name = 'untitled', parent = null) {
          this.name = name;
          this.parentTask = parent;
      }

      //Method which displays the tag name
      display_name() {
        return $('<li>').addClass('tag').text(this.name);      
      }

      //Method which displays the tag
      display() {
        let tag_item = this.display_name();

        let field = $('<input>').prop('type', 'text').prop('value', this.name);
        let button = $('<button>').addClass('validationButton').prop('type', 'submit').text('✓');
        let removeButton = $('<button>').addClass('removeButton').text('X');
        let form = $('<form>').append(field).append(button).append(removeButton);
        let in_edit = false;

        tag_item.click((event) => {
          event.stopPropagation();
          event.preventDefault();

          let target = $(event.target);

          if (target.is('li') && !in_edit) {
            tag_item.empty();
            tag_item.append(form);
            in_edit = true;          
          }

          if (target.is('button') && target.prop('type') === 'submit') {
            if(field.val() !== '') {
              this.name = field.val(); 
              module.StorageManager.storeTasks();
            }

            tag_item.empty();
            tag_item.text(this.name);

            field.val(this.name);

            in_edit = false;
          }

          if (target.is('button') && target.hasClass('removeButton')) {
            if(confirm('Voulez-vous vraiment supprimer ce tag ?')) {
              tag_item.remove();
              this.removeTagFromParent();

              module.StorageManager.storeTasks();  
            }
          }
       });

       return tag_item;
     }

     //Method which removes the tag from the parent task
     removeTagFromParent() {
       this.parentTask.removeTag(this);
     }
  }; 

module.Tag=类标记{
构造函数（名称='untitled'，父项=null）{
this.name=名称；
this.parentTask=parent；
}
//方法，该方法显示标记名
显示名称（）{
返回$（'
'）.addClass（'tag'）.text（this.name）；
}
//显示标记的方法
显示（）{
让tag_item=this.display_name（）；
let field=$（''）.prop（'type'，'text'）.prop（'value'，this.name）；
let button=$（''）.addClass（'validationButton'）.prop（'type'，'submit'）.text（'✓');
让removeButton=$（''）.addClass（'removeButton'）.text（'X'）；
让表单=$（''）.append（字段）.append（按钮）.append（移除按钮）；
let in_edit=false；
标记项目。单击（（事件）=>{
event.stopPropagation（）；
event.preventDefault（）；
让target=$（event.target）；
if（target.is（'li'）&&！in_edit）{
tag_item.empty（）；
标记项目。附加（表格）；
in_edit=true；
}
if（target.is（'button'）&&target.prop（'type'）='submit'）{
如果（field.val（）！=''）{
this.name=field.val（）；
module.StorageManager.storeTasks（）；
}
tag_item.empty（）；
tag_item.text（此名称）；
field.val（this.name）；
in_edit=false；
}
if（target.is（'button'）&&target.hasClass（'removeButton'））{
如果（确认（'Voulez-vous vraiment Supplier ce tag？'））{
标记_项。删除（）；
此参数为.removeTagFromParent（）；
module.StorageManager.storeTasks（）；
}
}
});
返回标签项目；
}
//方法，该方法从父任务中移除标记
removeTagFromParent（）{
this.parentTask.removeTag（this）；
}
}; 

我的侦听器位于display方法中，它使用

标记.name

属性和方法体中创建的一些变量。我看不到如何在其他地方编写此函数，Google也没有帮助我

我希望我的问题很清楚，英语不是我的母语。

---

一些建议？

您可以将匿名函数提取为另一个类方法。它是一个事件处理程序，因此为了正确访问定义的对象，您必须正确绑定它

以下是修改后的脚本示例：

module.Tag = class Tag {
      constructor(name = 'untitled', parent = null) {
          this.name = name;
          this.parentTask = parent;
      }

      //Method which displays the tag name
      display_name() {
        return $('<li>').addClass('tag').text(this.name);      
      }

      //Method which displays the tag
      display() {
        let tag_item = this.display_name();

        let field = $('<input>').prop('type', 'text').prop('value', this.name);
        let button = $('<button>').addClass('validationButton').prop('type', 'submit').text('✓');
        let removeButton = $('<button>').addClass('removeButton').text('X');
        let form = $('<form>').append(field).append(button).append(removeButton);
        let in_edit = false;

        tag_item.click(this.handleClick.bind(this));  
        // this is where you invoke the function and 
        //bind it to the context of the class

       return tag_item;
     }

     //Method which removes the tag from the parent task
     removeTagFromParent() {
       this.parentTask.removeTag(this);
     }

     // extracted method defined here:
      handleClick(event) {
          let tag_item = this.display_name();
          let field = $('').prop('type', 'text').prop('value', this.name);
          event.stopPropagation();
          event.preventDefault();

          let target = $(event.target);

          if (target.is('li') && !in_edit) {
            tag_item.empty();
            tag_item.append(form);
            in_edit = true;          
          }

          if (target.is('button') && target.prop('type') === 'submit') {
            if(field.val() !== '') {
              this.name = field.val(); 
              module.StorageManager.storeTasks();
            }

            tag_item.empty();
            tag_item.text(this.name);

            field.val(this.name);

            in_edit = false;
          }

          if (target.is('button') && target.hasClass('removeButton')) {
            if(confirm('Voulez-vous vraiment supprimer ce tag ?')) {
              tag_item.remove();
              this.removeTagFromParent();

              module.StorageManager.storeTasks();  
            }
          }
       }
  }; 

module.Tag=类标记{
构造函数（名称='untitled'，父项=null）{
this.name=名称；
this.parentTask=parent；
}
//方法，该方法显示标记名
显示名称（）{
返回$（'
'）.addClass（'tag'）.text（this.name）；
}
//显示标记的方法
显示（）{
让tag_item=this.display_name（）；
let field=$（''）.prop（'type'，'text'）.prop（'value'，this.name）；
let button=$（''）.addClass（'validationButton'）.prop（'type'，'submit'）.text（'✓');
让removeButton=$（''）.addClass（'removeButton'）.text（'X'）；
让表单=$（''）.append（字段）.append（按钮）.append（移除按钮）；
let in_edit=false；
标记项。单击（this.handleClick.bind（this））；
//这是调用函数和
//将其绑定到类的上下文
返回标签项目；
}
//方法，该方法从父任务中移除标记
removeTagFromParent（）{
this.parentTask.removeTag（this）；
}
//此处定义的提取方法：
handleClick（事件）{
让tag_item=this.display_name（）；
let field=$（''）.prop（'type'，'text'）.prop（'value'，this.name）；
event.stopPropagation（）；
event.preventDefault（）；
让target=$（event.target）；
if（target.is（'li'）&&！in_edit）{
tag_item.empty（）；
标记项目。附加（表格）；
in_edit=true；
}
if（target.is（'button'）&&target.prop（'type'）='submit'）{
如果（field.val（）！=''）{
this.name=field.val（）；
module.StorageManager.storeTasks（）；
}
tag_item.empty（）；
tag_item.text（此名称）；
field.val（this.name）；
in_edit=false；
}
if（target.is（'button'）&&target.hasClass（'removeButton'））{
如果（确认（'Voulez-vous vraiment Supplier ce tag？'））{
标记_项。删除（）；
此参数为.removeTagFromParent（）；
module.StorageManager.storeTasks（）；
}
}
}
}；

您可以将anonymouse函数提取为另一个类方法。它是一个事件处理程序，因此为了正确访问定义的对象，您必须正确绑定它

以下是修改后的脚本示例：

module.Tag = class Tag {
      constructor(name = 'untitled', parent = null) {
          this.name = name;
          this.parentTask = parent;
      }

      //Method which displays the tag name
      display_name() {
        return $('<li>').addClass('tag').text(this.name);      
      }

      //Method which displays the tag
      display() {
        let tag_item = this.display_name();

        let field = $('<input>').prop('type', 'text').prop('value', this.name);
        let button = $('<button>').addClass('validationButton').prop('type', 'submit').text('✓');
        let removeButton = $('<button>').addClass('removeButton').text('X');
        let form = $('<form>').append(field).append(button).append(removeButton);
        let in_edit = false;

        tag_item.click(this.handleClick.bind(this));  
        // this is where you invoke the function and 
        //bind it to the context of the class

       return tag_item;
     }

     //Method which removes the tag from the parent task
     removeTagFromParent() {
       this.parentTask.removeTag(this);
     }

     // extracted method defined here:
      handleClick(event) {
          let tag_item = this.display_name();
          let field = $('').prop('type', 'text').prop('value', this.name);
          event.stopPropagation();
          event.preventDefault();

          let target = $(event.target);

          if (target.is('li') && !in_edit) {
            tag_item.empty();
            tag_item.append(form);
            in_edit = true;          
          }

          if (target.is('button') && target.prop('type') === 'submit') {
            if(field.val() !== '') {
              this.name = field.val(); 
              module.StorageManager.storeTasks();
            }

            tag_item.empty();
            tag_item.text(this.name);

            field.val(this.name);

            in_edit = false;
          }

          if (target.is('button') && target.hasClass('removeButton')) {
            if(confirm('Voulez-vous vraiment supprimer ce tag ?')) {
              tag_item.remove();
              this.removeTagFromParent();

              module.StorageManager.storeTasks();  
            }
          }
       }
  }; 

module.Tag=类标记{
构造函数（名称='untitled'，父项=null）{
this.name=名称；
this.parentTask=parent；
}
//方法，该方法显示标记名
显示名称（）{
返回$（'
'）.addClass（'tag'）.text（this.name）；
}
//显示标记的方法
显示（）{
让tag_item=this.display_name（）；
let字段=$（''）.pr