Vue中使用Promise获取数据this指向问题

Question

假设methods中有个获取数据的方法getData
接收返回的数据参数为resultData
mounted里的写法

// 外面这个this
this.getData().then(response => {
  let result = response.data
// 里面这个this
  this.resultData = result
})

我的问题是 外面这个this 和 里面这个this 指向到底是否一样
调试的时候有时候then方法里面的this是undefined，有时候又是和外面的this指向一致，都是vuecomponent。而且即使里面的this是undefined，页面中也会显示resultData的值

箭头函数的内部的this是词法作用域，由上下文决定，那理论上里面的this和外面的this指向应该是一致的？可是为什么又会有不同的情况发生呢？

如果您知道答案，期待您的解答~ 感谢。

Answer 1

按照你的描述,我想到一种可能性,有可能外层的this改变,造成了箭头函数里面的this跟着改变
你可以用下面的语句测试看看

const that=this
this.getData().then(response => {
  let result = response.data
  console.log(this,that)            // 看看当 this 为 undefined 时, that 是不是也为 undefined
  this.resultData = result
})

Answer 2

用的是浏览器里面的断点？ 浏览器里面打断点调试可能会出现这种现象，这种现象并不代表代码有问题。

Answer 3

this是函数产生的, 定义一个函数就会产生作用域和this.
你已经知道箭头函数不产生this, 所以你代码里的外面和里面this指向相同.

另外, 如果你说有时候this是undefined, 那么仔细检查下代码, 这个情况是不会发生的, 只有出现function foo() {}或者是es6的写法foo () {}才会产生新的this