this的值，使用console.log打印正常，但debugger时却是undefined

Question

背景：

以下代码是使用vue-cli初始化vue项目时，在app.vue中添加的内容。

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      prop: 'haha'
    }
  },
  mounted() {
    this.test()
  },
  methods: {
    test() {
      let arr = [1]

      arr.forEach(elem => {
        console.log('this', this)
        debugger
      })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

问题描述：

我在test()方法中使用debugger想获取this的内容，通过console.log可以打印出我预料到的内容（即VueComponent对象信息）。但是通过在chrome中打断点，或者debugger的方式，this的值却是undefinded。

请问出现这种情况的原因是什么？

问题补充：

附上调试图

很感谢有人关注这些问题，一些评论提到“是不是还没跑到那一步你就查看this的数据了”；
实际情况是，我的debugger写在console.log('this', this)下，且当程序执行到debugger时，console.log已经打印出了this的信息，但是将鼠标放上this上时，还是显示undefinded

Answer 1

我总结了一下这个问题，可以在 这篇博客看，就是因为箭头函数 被babel打包改变了，this通过_this或者_this2 这个变量保存了，控制台直接输入this无法输出，而输入_this或者_this2,就能取到期望值。 https://blog.csdn.net/rudy_zh...

Answer 2

浏览器调试的时候，是你的程序还没跑到那一步吧。你试着让程序再运行到几步，this的值应该就出来了。

Answer 3

感谢fefe大佬提供的链接https://stackoverflow.com/q/3...

虽然没有完全看懂文章中的内容，但是从文中获取到提示已经可以解决我的疑惑了。

由于我还没有完全搞懂问题牵涉到的一堆原理，所以避免误导其他人，就不解释了。和我有相同问题的同学们可以参考上面的链接。

再次感谢大家关注！

Answer 4

确实是使用了箭头函数的问题。

我之前的解决办法是在箭头函数外面定义个const me = this;，然后在函数里面用me这个变量。