时间戳

首页 > 解决方案 > 如何编写非箭头函数作为参数

javascript - 如何编写非箭头函数作为参数

问题描述

是的，我已经知道 9028924 人会在发布后 8 秒内将此标记为重复问题。相信我......我已经用谷歌搜索了近一个小时，否则我不会问。

  methods: {
    stylizeHeader: debounce(event => {
      if (event.target.scrollTop <= 1 && !this.scrolled) {
        this.scrolled = true;
        console.log('true');
      } else if (this.scrolled) {
        this.scrolled = false;
        console.log('false');
      }
    }, 20),
  },

我正在使用 Vue，我想要做的就是访问thisdebounce 函数中的属性，因为它与外部范围（一个 Vue 实现细节）有关。问题显然是箭头函数。

我找不到正确的语法。我已经尝试了我能想到的所有排列() { }

如果我使用function() { }它可以正常工作，但 eslint 会抱怨（所以我想遵循最新的约定）。

我如何从字面上用 ES6 编写它，以便我可以访问this.

标签： javascriptvue.jsecmascript-6vuejs3

解决方案

如果function() {}有效，但 linter 抱怨该函数没有名称，那么只需给该函数一个名称

methods: {
  stylizeHeader: debounce(function debouncedStylizeHeader(event) {
    // ..... your code
  }, 20),
},

命名此类函数的目的纯粹是出于调试目的 - 错误堆栈跟踪将包含该函数的名称，而不是anonymous function（或类似的），如果您有一个大型代码库并且有很多人在使用它，这将很有用

也许您正在使用的 linter 规则是为这样的环境（即大型代码库）而设计的，并且该规则可以帮助调试错误

没有理由不这样做，这是一种很好的做法（在我看来）

推荐阅读