javascript - 如果监听器函数使用局部变量，我该如何在其他地方编写它？

Question

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

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

这是我的代码的一小部分:

  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);
     }
  }; 

我的监听器位于显示方法中，它使用 Tag.name 属性和方法主体中创建的一些变量。我不知道如何在其他地方编写这个函数，Google 也没有帮助我。

我希望我的问题很清楚，英语不是我的母语。有什么建议吗？

Answer 1

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

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

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;

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

       return tag_item;
     }

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

     <b>// 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();  
            }
          }
       }</b>
  };