实验开始场景：webpack:mode=developmentbabel:babel/preset-env箭头函数和vue关系不大，但是我在vue中遇到了这个恶心的问题：期间debugger进程，实时监控this与console.log(this)不一致。简化代码：consttest1=()=>{console.log('test1calledthis------>',this);};consttest2=()=>{console.log('test2调用了this------>',this);test1();};test2();运行结果：输出了两个Window对象，貌似没有问题，但是这时候在两个console下下断点，再次运行，按f10前进到test1()的执行悲剧，监听undefined就出来了。再来一遍，这次在console里删掉这个，果不其然，在monitor里还是undefined，在console里输入this，现在console里是undefined，测试结束不要用这个，是不明确的;并使用它，它是未定义的有一点吗？其实这里运行的js其实是webpack打包的，兼容babel。让我们修改代码如下：classTClass{a=1;b=2;c=3;constructor(){}test1(){console.log('test1调用了this.a----->',this.a);this.test2().then(()=>{debugger;console.log('test1calledthis.c----->',this.c);});}test2(){returnnewPromise((resolve,reject)=>{console.log('test2calledthis.b----->',this.b);resolve();});}}consttObject=newTClass();tObject.test1();运行它，监控这个这个指向Window？在调试器中，然后看控制台输出我类的属性如何运行Windowup？？？不行，直接在控制台打印出来，看你是不是很无语。...既然运行了babel之后的代码，为什么不去babel官网翻译一下呢？如果我手动加一个_this监控，其实我就抓到你了。实际运行的是处理后的js，造成调试困难。找到解决办法：使用babel-plugin-transform-es2015-arrow-functions依赖npmibabel-plugin-transform-es2015-arrow-functions-D成功后在webpack.config.js或babel.config.json中添加这个安装插件模块：{规则：[{测试：/\.m?js$/，排除：/(node_modules|bower_components)/，使用：{加载器：'babel-loader'，选项：{预设：['@babel/preset-env'],plugins:[['transform-es2015-arrow-functions',{spec:true}]],},},},],},让我监控这次有什么变化device,output,console,mouse指向这个（图片无法截取）都能正确识别。问题解决了，但没有完全解决。这里有一篇文章解释了V8的优化也会导致这样的情况，但这是另外一种情况为什么Chrome调试器会认为closedlocalvariableisundefined？百度的两小时确实不如谷歌的两分钟。（一开始我也以为我的问题出在这里，后来发现我看错了方向）EpilogueJS真棒。
