我们正在愉快的使用Vue开发项目的时候，突然报错：thisisundefined不用担心，不止你一个，我也经常遇到遇到这个问题很多接下来，我们就来看看如何解决这个问题。一个可能的原因是混淆了常规函数和箭头函数的用法，如果你有这个问题，我猜你正在使用箭头函数。如果您将箭头函数替换为常规函数，它可能会为您解决此问题。让我们更深入地挖掘并尝试理解为什么会这样。毕竟，知识就是力量，如果我们知道是什么导致了我们的问题，我们就可以在未来避免很多挫折和浪费时间。出现这种类型的错误还有其他几个原因。使用fetch或axios获取数据使用像lodash或underscore这样的库理解两种主要类型的函数在JS中我们有两种不同类型的函数。它们的操作方式几乎相同，只是它们处理变量的方式不同。这给新老Javascript开发人员造成了很多困惑，但是当我们弄清楚时，有这种困惑是件好事。常规函数可以用几种不同的方式定义常规函数。第一种方法在Vue组件中不太常见，因为写起来比较长：第二种方法是一种简写方式，我们也经常使用：在像这样的常规函数??中，this将引用函数的“所有者”。因为我们在Vue组件上定义它，所以this指的是Vue组件。在大多数情况下，我们应该在Vue中使用常规函数，尤其是在创建方法时computedpropswatchedprops虽然通常我们只需要常规函数，但箭头函数也很方便。箭头函数箭头函数可以写得更短更快，因此最近很受欢迎。然而，在对象上定义方法时，它们并没有太大的不同，就像我们在编写Vue组件时所做的那样。这是它们在Vue组件上的样子：真正的区别在处理this时发挥作用。箭头函数是词法范围的，这意味着箭头函数从其上下文中获取this。如果你试图从Vue组件上的箭头函数内部访问它，你会得到一个错误，因为它不存在。简而言之，尽量避免在Vue组件上使用箭头函数。这将避免很多头痛和困惑。有时使用箭头函数很好，但这只有在你不引用它时才有效。知道了两大类函数后，如何正确使用呢？匿名函数当我们只需要创建一个函数而不需要从其他任何地方调用它时，匿名函数就非常有用。下面是一些使用匿名函数的场景：使用axios或者fetch来获取数据filter、map、reduce等函数方法举一个Vue方法中任意位置的例子：从例子中可以看出，在大多数情况下，当我们创建匿名函数，我们使用箭头函数。我们通常使用箭头函数有几个原因：更短、更简洁的语法提高可读性thisistakenfromtheparentclass在Vue方法中，箭头函数也可以用作匿名函数。等等，当我们尝试访问this时，我们不是刚刚发现箭头功能不起作用吗？这就是区别。当我们在常规函数或速记函数中使用箭头函数时，常规函数会将this设置为我们的Vue组件，但箭头函数不会。下面是一个示例：filter方法可以访问this.match，因为箭头函数使用与filteredMessages方法相同的上下文。由于此方法是一个常规函数（不是箭头函数），它会将自己的上下文设置为Vue实例。下面进一步讨论如何使用axios或者fetch来获取数据。抓取数据时使用正确的函数如果你正在使用fetch或axios异步抓取数据，最好使用Promise。Promises喜欢匿名箭头函数，它们也使处理这个问题变得容易得多。如果你正在获取一些数据并想在你的组件上设置它，这是你应该这样做的正确方法：注意我们如何使用常规函数作为Vue组件上的方法，然后在Promise在fetchData()范围内，我们将其设置为Vue组件，因为它是一个常规函数。由于箭头函数使用外部作用域作为它们自己的作用域，因此箭头函数还将this设置为我们的Vue组件。这允许我们通过它访问Vue组件并更新dataFromServer。但是，如果您需要将函数传递给像lodash或underscore这样的辅助库怎么办？使用Lodash或Underscore假设我们在Vue组件上有一个方法要使用Lodash或Underscore。如何防止这是未定义的错误。如果你使用过React，你可能见过这样的东西。这就是我们用Vue所做的。就是这样！我们所要做的就是获取该函数，将其包装在去抖动函数中，然后返回一个内置去抖动的新函数。现在，当我们在Vue组件上调用this.methodToDebounce()时，我们将调用去抖动版本。什么是词法作用域如前所述，正则函数和箭头函数之间的差异的主要原因与词法作用域有关。我们来分析一下它的含义。首先，作用域是程序中变量存在的任何区域。在Javascript中，window变量具有全局作用域，它随处可用。尽管大多数变量仅限于定义它们的函数、它们所属的类或模块。其次，“词法”一词仅表示范围由您编写代码的方式决定。一些编程语言只有在程序运行时才确定范围内的内容。这可能会造成混淆，因此大多数语言只是使用词法范围。箭头函数使用词法作用域，而常规函数和速记函数则不使用。这里棘手的部分是词法范围如何影响函数中的this。对于箭头函数，this绑定到外部作用域的this。this绑定到常规函数的方式有点奇怪，这就是引入箭头函数的原因，也是大多数人尽可能多地使用箭头函数的原因。作用域如何在函数中工作以下是一些示例，说明作用域在这两种函数类型之间的工作方式有何不同将作用域绑定到函数我们可以使用bind方法来更改this的绑定：constboundFunction=unboundFunction.bind(this);这使我们在编写Vue组件时更加灵活，并且更容易重用方法。当然可读性比较差，尽量避免使用的太频繁。
