Javascript 旧语法到箭头函数的转换

Question

So I want to use this example without jquery or other libraries.

I have this code

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

As you can see it uses the old style function()

How do I change this to an arrow function style one?

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

This doesn't work. Am I close or am I looking at this completely wrong? Again I don't want to use libraries for this exercise.

Answer 1

The problem with arrow functions is that they keep the this object of the outer scope.

Your first example would have the XMLHttpRequest bound to the this reference the second the window

To make this work with arrow notation, you need to reference the XMLHttpRequest with the outer name xmlHttp or bind it to the callback function:

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

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

Be aware that you can not override the this reference of arrow functions by any mean (bind, call, apply)

Answer 2

Bellian's code above looks nice but the .bind(undefined, request); gives the simplicity away.

There's an alternate way of doing this in such a way that it would sync to your questions expected answer:

I highly recommend you should do this instead. The arrow function removed the direct this to gain better access to the results. Check for yourself console.log(x) only without the .target

You can also:

 let xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = x => { let result = x.target; if(result.readyState == 4 && result.status == 200){ console.log(result.responseText); } };