为何XMLHttpRequest回调函数可使用未定义的this.responseText？

这个问题问到了JavaScript里this指向的核心规则——它的指向完全由函数的调用方式决定，和函数定义的位置无关。咱们结合你的代码一步步拆解：

• 首先看代码里的关键步骤：你把handleSuccess函数赋值给了asyncRequestObject这个XHR实例的onload属性。当请求成功完成时，浏览器会触发onload事件，这时候它会调用你赋值的handleSuccess函数，但调用方式是以XHR实例作为上下文来执行的——换句话说，浏览器内部做的事情类似：

  asyncRequestObject.handleSuccess();
  

  这种“对象.方法()”的调用方式，会自动把this绑定到调用这个方法的对象上，也就是asyncRequestObject实例本身。

• 你提到“JavaScript为每个新函数创建独立作用域”，这点没错，但this不属于函数的词法作用域（词法作用域是函数定义时就确定的），它是动态作用域，只有在函数调用时才确定指向。所以哪怕handleSuccess是在全局作用域定义的，只要它是被XHR实例作为方法调用的，this就指向这个实例。

• 而responseText是XMLHttpRequest实例自带的属性，当请求成功完成后，浏览器会把响应内容填充到这个属性里，所以你通过this.responseText就能拿到对应的响应文本了。

举个反例帮你理解：如果直接在全局作用域调用handleSuccess()，这时候this在非严格模式下会指向window对象，严格模式下是undefined，自然就访问不到responseText了——因为这时候调用方式变了，this的指向也跟着变了。

另外补充个小知识点：如果你用箭头函数作为回调，比如：

asyncRequestObject.onload = () => {
  console.log(this.responseText); // 这里的this不会指向XHR实例！
};

这时候this会继承外层作用域的this（比如全局的window），因为箭头函数没有自己的this，它的this是定义时就确定的词法作用域里的this，所以反而会出错。

内容的提问来源于stack exchange，提问作者dehmey