一个神奇的 js 问题

[atwoodSoInterest]

今天遇到了一个神奇的 js 问题，debug 到最后发现了问题，但是不知道原理，有大佬能解释下吗？

function func() {
var s = "heheda";
$.ajax({
type: "post",
dataType: "text",
contentType: "application/json; charset=utf-8",
url: "",
data: JSON.stringify([{}]),
success: function () {
},
error: function (ex) {
//debugger;
s = "inner heheda";
}
});

$.ajax({
type: "post",
dataType: "text",
contentType: "application/json; charset=utf-8",
url: "",
data: JSON.stringify([{}]),
success: function () {
},
error: function (ex) {
//debugger;
bug = "WTF?!";
}
});
}

测试环境：win10 chrome 78.0.3904.108 （正式版本） （ 64 位）

定义一个这样的函数，调用之后在 debug 模式下发现，在使用了外部变量 s 的 ajax callback 里面,s 是可以显示值的。但是在没有使用外部变量 s 的 ajax callback 里面，s 就变成了 undefined ！这。。。也太神奇了吧
（不要用 console 打印哦，因为打印也用到了变量 s ）

[f056917]

没使用变量 S，可不就是打印 undefined 吗，未定义啊

[atwoodSoInterest]

@f056917 外部变量 s 的作用域会因为内部使不使用而改变吗？你可以把 debugger 注释放开，调试一下。

[guoguo2003guo]

里面的 s 也定义一下呗

[lqzhgood]

不知道 lz 在说啥…

[gaoryrt]

变量提升
s = 123 第一步相当于 var s = undefined 放到第一行，执行到的时候再赋值 123
debugger 中断的时候可不就是 undefined 嘛

[xiangyuecn]

换 ie 试试应该就没有这个问题了。怀疑是 chrome 对这种闭包内压根没有作用的代码进行了优化，新版本浏览器经常 debugger 会出现这种，不过手动展开作用域里面的 Closure 会发现是有值的，手动存一个全局变量就能得到实际的值。

[atwoodSoInterest]

@xiangyuecn 正解！感谢

[chairuosen]

是 chrome 的优化，很早(起码 2-3y)就有了

[caola]

虽然不知道具体的表达，
callback 是异步执行的，你想直接在 callback 里面打印是不是有点搞笑了。。。

[fox0001]

@lqzhgood #4 确实不知道…我试了一下，可以在 callback 里改变 s 的值

[atwoodSoInterest]

@lqzhgood @caola @fox0001 我再解释一下，示例代码中的变量 s 的作用域应该在整个 func 函数中，两个 ajax callback 也都应该在作用域内。但是在 chrome 浏览器的 debug 模式下，就会发现神奇的一幕：使用了变量 s 的 callback 中，控制台可以输入 s，显示有值；没有使用变量 s 的 callback 中，控制台输出 s，显示 s is not defined。

[laravel]

setInterval('debugger', 1000);

[xingyue]

@xiangyuecn #6 你好，图 1 和图 2 是我复现楼主的代码，确实在[[Scopes]]中 Closure 找到了未使用的变量；但是图 3 中我注释掉了使用内部变量的代码，再次查看闭包返回的函数 f1 发现[[Scopes]]中 Closure 都没了，请问这是怎么回事
(图 1)

(图 2)

(图 3)

[xiangyuecn]

@xingyue #13 也许图 3 这个 Closure 是和变量一样被优化掉了吧，f2 函数内没有任何东西需要用到闭包。加一点别的什么的构成引用，应该就会显示这个 Closure