javascript - chrome devtool调试中的this指向问题？

Question

题目描述

如下图所示，利用chrome的devtools工具查看当前执行代码处的的Local Scope，发现此时this为undefined,但是为何this.visible在实际执行过程中没有报错？

题目来源及自己的思路

问题来源于vue文件中的一段函数代码，我的问题及思路如下

1. 我知道箭头函数的this指向来源于所在上下文，此时应该是指向Vue实例
2. 但是为何在devtool中Debug过程，此处的this为undefined

相关代码

具体代码如下，是vue文件中的methods中的一个方法

//执行方法detail(record) {      this.returnConfirm = true      getAction(this.url.queryById, {id: record.id}).then(res => {        if (res.success) {          this.visible = 'edit';          this.$nextTick(()=>{            this.$refs.xxxxx.isDetails = true            this.$refs.xxxx.edit(res.result)          })        } else {          this.$message.error("获取失败")          this.visible = 0        }      })    },//getAction引用export function getAction(url,parameter) {  return axios({    url: url,    method: 'get',    params: parameter,  });}

你期待的结果是什么？实际看到的错误信息又是什么？

该代码并没有报错，只是不明白此处在debug时，为何this为undefined，在正常运行中却不报错？

Answer 1

该问题可能是由于Chrome DevTools在调试过程中对this的处理方式导致的。在JavaScript中，this关键字的值取决于函数被调用的方式。在严格模式（strict mode）下，如果函数不是作为对象的方法被调用，this的值将是undefined。

在你的代码中，getAction函数是作为方法调用的，所以this应该指向调用它的对象，也就是Vue实例。然而，当你在Chrome DevTools中查看Local Scope时，你可能会看到不同的this值。这是因为DevTools在调试过程中对this做了特殊处理。

当你在调用堆栈的顶部（即最近的函数调用）查看this的值时，它可能是undefined。这是因为在调试过程中，DevTools将this的值设置为undefined，以避免在调试过程中对实际代码产生影响。这样做是为了让你能够专注于代码的逻辑，而不是this的值。

然而，在实际运行过程中，this的值应该是Vue实例，因为getAction函数是作为Vue实例的方法被调用的。所以，你在实际运行中没有看到任何错误。

如果你想在调试过程中查看正确的this值，你可以尝试在调用堆栈的底部（即最初的函数调用）查看this的值。通常来说，在这个层级上查看的this值应该是正确的。