作者：MichaelThiessen已经收录了，之前好评文章的更多分类，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。我们正在愉快的使用Vue开发项目的时候，突然报错：thisisundefined别着急，不止你一个，我也经常遇到这个问题很多次，一起来看看怎么解决吧问题。一个可能的原因是混淆了常规函数和箭头函数的用法，如果你有这个问题，我猜你正在使用箭头函数。如果您将箭头函数替换为常规函数，它可能会为您解决此问题。让我们更深入地挖掘并尝试理解为什么会这样。毕竟，知识就是力量，如果我们知道是什么导致了我们的问题，我们就可以在未来避免很多挫折和浪费时间。出现这种类型的错误还有其他几个原因。使用fetch或axios获取数据使用像lodash或underscore这样的库理解两种主要类型的函数在JS中我们有两种不同类型的函数。它们的操作方式几乎相同，只是它们处理变量的方式不同。这给新老Javascript开发人员造成了很多困惑，但是当我们弄清楚时，有这种困惑是件好事。常规函数可以用几种不同的方式定义常规函数。第一个方法在Vue组件中不太常见，因为写起来比较长：methods:{regularFunction:function(){//Dosomestuff}}{//Dosomestuff}}在像这样的常规函数??中，this将引用函数的“所有者”。因为我们在Vue组件上定义它，所以this指的是Vue组件。在大多数情况下，我们应该在Vue中使用正则函数，尤其是在创建方法时computedpropswatchedprops虽然通常我们只需要正则函数，但箭头函数也很方便。箭头函数箭头函数可以写得更短更快，因此最近很受欢迎。然而，在对象上定义方法时，它们并没有太大的不同，就像我们在编写Vue组件时所做的那样。下面是它们在Vue组件上的样子：methods:{arrowFunction:()=>{//Dosomestuff}}在处理这个问题时，真正的区别开始发挥作用。箭头函数是词法范围的，这意味着箭头函数从其上下文中获取this。如果你试图从Vue组件上的箭头函数内部访问它，你会得到一个错误，因为它不存在data(){return{text:'Thisisamessage',};},methods:{arrowFunction:()=>{console.log(this.text);//错误！thisisundefined}}简而言之，尽量避免在Vue组件上使用箭头函数。这将避免很多头痛和困惑。有时使用箭头函数很好，但这只有在你不引用它时才有效。computed:{location:()=>window.location,}现在我们知道了两种主要的函数类型，那么我们如何正确使用它们呢？匿名函数当我们只需要创建一个函数而不需要从其他任何地方调用它时，匿名函数就非常有用。下面是一些使用匿名函数的场景使用axios或者fetch来获取数据filter,map,reduceVue方法中任意位置的Function方法看一个例子：//Fetchingdatafetch('/getSomeData').then((data)=>{this.data=data;});//函数方法constarray=[1,2,3,4,5];constfiltered=array.filter(number=>number>3);constmapped=array.map(number=>number*2);constreduced=array.reduce((prev,next)=>prev+next);从例子中可以看出，我们在创建匿名函数的时候，大部分时候，都会使用箭头函数。我们通常使用箭头函数有几个原因更短、更简洁的语法提高了可读性Thisistakenfromtheparentclass在Vue方法中，箭头函数也可以用作匿名函数。等等，当我们尝试访问this时，我们不是刚刚发现箭头功能不起作用吗？这就是区别。当我们在常规函数或速记函数中使用箭头函数时，常规函数会将this设置为我们的Vue组件，但箭头函数不会。这是一个示例：data(){return{match:'Thisisamessage',};},computed:{filteredMessages(messages){console.log(this);//VueconstfilteredMessages=messages.filter(//引用我们的Vue组件(message)=>message.includes(this.match));返回过滤后的消息；filter方法可以访问this.match，因为箭头函数使用与filteredMessages方法相同的上下文。由于此方法是一个常规函数（而不是箭头函数），它将自己的上下文设置为Vue实例。下面进一步讨论如何使用axios或者fetch来获取数据。抓取数据时使用正确的函数如果你正在使用fetch或axios异步抓取数据，最好使用Promise。Promises喜欢匿名箭头函数，它们也使处理这个问题变得容易得多。如果你正在获取一些数据并想在你的组件上设置它，这是你应该做的正确方法：exportdefault{data(){return{dataFromServer:undefined,};},方法：{fetchData(){fetch('/dataEndpoint').then(data=>{this.dataFromServer=data;}).catch(err=>console.error(err));}}};注意我们如何使用Regular函数作为方法，然后在Promise.then(data=>{this.dataFromServer=data;})范围内使用匿名箭头函数，在fetchData()范围内，我们将this设置为Vue组件，因为它是一个常规函数。由于箭头函数使用外部作用域作为它们自己的作用域，因此箭头函数还将this设置为我们的Vue组件。这允许我们通过它访问Vue组件并更新dataFromServer。但是，如果您需要将函数传递给像lodash或underscore这样的辅助库怎么办？使用Lodash或Underscore假设我们在Vue组件上有一个方法要使用Lodash或Underscore。如何防止这是未定义的错误。如果你使用过React，你可能见过这样的东西。这就是我们用Vue所做的。created(){this.methodToDebounce=_.debounce(this.methodToDebounce,500);},methods:{methodToDebounce(){//在这里做一些事情}}就是这样！我们所要做的就是获取该函数，将其包装在去抖动函数中，然后返回一个内置去抖动的新函数。现在，当我们在Vue组件上调用this.methodToDebounce()时，我们将调用去抖动版本。什么是词法作用域如前所述，正则函数和箭头函数之间的差异的主要原因与词法作用域有关。我们来分析一下它的含义。首先，作用域是程序中变量存在的任何区域。在Javascript中，window变量具有全局作用域，它随处可用。尽管大多数变量仅限于定义它们的函数、它们所属的类或模块。其次，“词法”一词仅表示范围由您编写代码的方式决定。一些编程语言只有在程序运行时才确定范围内的内容。这可能会造成混淆，因此大多数语言只是使用词法范围。箭头函数使用词法作用域，而常规函数和速记函数则不使用。这里棘手的部分是词法范围如何影响函数中的this。对于箭头函数，this绑定到外部作用域的this。this绑定到常规函数的方式有点奇怪，这就是引入箭头函数的原因，也是大多数人尽可能多地使用箭头函数的原因。作用域如何在函数中工作下面是一些示例，说明作用域在这两种函数类型之间的工作方式有何不同//Thisvariableisinwindowscopewindow.value='Boundtothewindow';constobject={//这个变量在对象范围内value:'Boundtotheobject',arrowFunction:()=>{console.log(this.value);//'绑定到窗口'},regularFunction(){console.log(this.value);//'绑定到对象'}};将作用域绑定到函数我们可以使用bind方法来改变这个constboundFunction=unboundFunction.bind(this);的绑定。这让我们在编写Vue组件时更加灵活，更容易重用方法。当然可读性比较差，尽量避免使用的太频繁。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://www.techalyst.com/pos...每周更新交流文章。可以微信搜索“大千世界”立即阅读更新（比博客早一两篇），这篇文章GitHubhttps://github.com/qq449245884/xiaozhi已经收录，还有我的很多文档已经整理好了。欢迎明星和完美。可以参考考点面试。另外关注公众号，后台回复福利就可以看到福利了。你知道。
