如何在ES6类中提取Algolia Autocomplete的onSelect处理器并调用类内方法

我完全懂你的困扰——在配置Algolia Autocomplete时，onSelect内部的this已经不再指向你的AutocompleteSetUp类实例了，所以直接调用this.autocompleteSelectionHandler会找不到方法。咱们先解决这个核心问题，顺便也聊聊怎么提取其他模板函数让代码更整洁。

核心问题：修复this的指向 #

你遇到的本质是函数上下文丢失的问题，这里有两种简单的解决方式：

方法1：提前保存类实例的this到变量

在autocomplete_elem_setup方法开头，把类实例的this存到一个变量里（比如self），之后在嵌套函数里用这个变量来调用类方法：

autocomplete_elem_setup(htmlNode) {
  // 提前保存类实例的this，避免嵌套函数里上下文丢失
  const self = this;
  autocomplete({
    container: htmlNode,
    getSources({ query }) {
      return fetch(`/artists.json?query=${query}`)
        .then((response) => response.json())
        .then((data) => {
          return [
            {
              sourceId: `artists`,
              getItems() { return data; },
              getItemInputValue({ item }) { return item.name; },
              templates: {
                header() { return 'Suggestions'; },
                item({ item }) { return `Artist: ${item.name}`; },
                footer() { return 'Powered by Algolia Autocomplete'; },
              },
              onSelect({ item, source }) {
                // 用self调用类方法，参数按需传递
                self.autocompleteSelectionHandler({ item, source, container: htmlNode });
              },
            },
          ];
        });
    },
  });
}

方法2：用箭头函数定义onSelect

箭头函数会继承外部作用域的this，也就是类实例的this，这样直接调用类方法就没问题了：

onSelect: ({ item, source }) => {
  // 箭头函数里的this就是类实例
  this.autocompleteSelectionHandler({ item, source, container: htmlNode });
},

额外：提取模板函数让代码更整洁 #

你提到想把templates里的item等函数也提取出来，方法和上面一样，只要保证调用时的this指向类实例就行。

先在类里定义这些模板方法：

// 提取header模板
autocompleteHeader() {
  return 'Suggestions';
}

// 提取item模板
autocompleteItem({ item }) {
  return `Artist: ${item.name}`;
}

// 提取footer模板
autocompleteFooter() {
  return 'Powered by Algolia Autocomplete';
}

然后在配置里用箭头函数调用这些方法：

templates: {
  header: () => this.autocompleteHeader(),
  item: ({ item }) => this.autocompleteItem({ item }),
  footer: () => this.autocompleteFooter(),
},

或者用提前保存的self变量调用也可以，效果是一样的。

这样整个类的代码就会更清晰，逻辑也更模块化啦。

内容的提问来源于stack exchange，提问作者gfd