JS异步等待文件示例中为何用this.responseText而非req.responseText

以下是等待文件加载的异步场景示例代码：

function myDisplayer(some) {  
  document.getElementById("demo").innerHTML = some; 
}
 
function getFile(myCallback) {
  let req = new XMLHttpRequest();  
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Error: " + req.status);
    }   
  }   
  req.send(); 
}
 
getFile(myDisplayer);

疑问点 #

该示例用于演示异步场景下的文件等待加载逻辑，疑问聚焦于onload回调中的如下代码行：

myCallback(this.responseText);

为何此处不直接使用以下写法实现相同逻辑：

myCallback(req.responseText);

解答 #

这两种写法在当前示例中的运行效果完全一致，不存在功能差异，只是书写习惯不同而已，具体原因如下：

• req.onload绑定的是普通function声明的事件回调，当XMLHttpRequest请求完成触发onload事件时，该回调函数的执行上下文会默认绑定到绑定事件的请求实例也就是req上，此时this === req，因此this.responseText和req.responseText取到的是完全相同的值。
• 示例中使用this.responseText是早期DOM事件编程的通用习惯：事件回调内的this永远指向绑定当前事件的目标对象，不依赖外部的变量命名——哪怕后续把req的变量名改成xhr、request，回调内的this不需要做任何修改就能正常工作。
• 两种写法并非在所有场景下都能互换：如果把onload的回调改成箭头函数，箭头函数本身没有独立的this绑定，会继承外层作用域的this值，此时this不再指向req实例，写this.responseText会直接报错，只能通过闭包引用的req.responseText正常取值。

反例参考（箭头函数场景下两种写法不等价）：

req.onload = () => {
  if (req.status == 200) {
    // 此处写this.responseText会取到undefined，无法正常运行
    myCallback(req.responseText); // 仅该写法可正常执行
  } else {
    myCallback("Error: " + req.status);
  }   
}

简单来说，教程中选择this写法只是遵循传统DOM事件回调的书写惯例，换成req.responseText的写法运行结果完全相同，不存在逻辑问题。

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