Javascript 箭头函数转换的旧语法

Question

所以我想在没有 jquery 或其他库的情况下使用这个示例。

我有这个代码

let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {...}

如您所见，它使用旧样式 function()

如何将其更改为箭头函数样式？

let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = () => {...}

这行不通。我是关闭还是我完全错误地看待这个？同样，我不想在本练习中使用库。

Answer 1

箭头函数的问题在于它们保留了外部作用域的 this 对象。

您的第一个示例将 XMLHttpRequest 绑定到 this 引用，第二个示例 window

要使用箭头表示法，您需要使用外部名称 xmlHttp 引用 XMLHttpRequest 或将其绑定到回调函数：

let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = ((request) => {...}).bind(undefined, request);

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

请注意，您不能以任何方式（绑定、调用、应用）覆盖 this 箭头函数的引用

Answer 2

上面 Bellian 的代码看起来不错，但是 .bind(undefined, request); 暴露了简单性。

还有一种替代方法可以同步到您的问题预期答案：

我强烈建议您改为这样做。箭头函数删除了直接的 this 以更好地访问结果。自己检查 console.log(x) 只有没有 .target

您还可以：

let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = x => {
  let result = x.target;

        if(result.readyState == 4 && result.status == 200){         
            console.log(result.responseText);
            
        }
    
};

Javascript 箭头函数转换的旧语法

Javascript old syntax to arrow function conversion

javascript

ajax

xmlhttprequest

arrow-functions