Question

我正在学习Ajax和ES6，所以我想将一个函数绑定到onload属性来自XmlHttpRequest obj。首先，我编写了一个匿名函数，它运行正常。但是当我将功能更改为箭头语法时，标识为“ text”的元素没有任何值。

//this code runs normally
xhr.onload = function() {
   if (this.status === 200) {
      document.getElementById("text").innerText = this.responseText;
   } else if (this.status === 404) {
      document.getElementById("text").innerText = "Not Found!";
   }
};


// this code can not run
xhr.onload = () => {
   if (this.status === 200) {
      document.getElementById("text").innerText = this.responseText;
   } else if (this.status === 404) {
      document.getElementById("text").innerText = "Not Found!";
   }
};

我希望id为“ text”的元素具有值，但是当我将函数更改为箭头语法时，该元素根本不会获得任何值。

Answer 1

箭头函数保留外部函数的this性质。在最上面的示例中，this指的是xhr。在底部函数中，this引用了其他内容（无法从给定的代码确定）。

Answer 2

这里的问题是this在onload函数中没有上下文。因此，当您检查条件this.status时，它正在寻找范围为包含函数的this。但是，箭头功能从本质上讲是作用于父级的。

为什么我的XmlHttpRequest的onload道具不能使用箭头功能

2 个答案: