0

Having the following javascript Promise code:

const loadImage = (src) => new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener(`load`,()=>resolve(img));
    img.addEventListener(`error`,(event)=>reject(event));
    img.src=src;
});

Why it doesn't work if I use resolve(this) instead of resolve(img)?

Probably a silly question but... wanting to understand the reason. I often use this as reference inside event listeners and it works without troubles... (I'm quite sure the reason is related to the Promise, yet I didn't get it...) Thank you for your help

danicotra
  • 1,333
  • 2
  • 15
  • 34
  • 1
    Keep in mind that `img.addEventListener('error', event => reject(event))` is the same as `img.addEventListener('error', reject)`. – 3limin4t0r Jul 29 '18 at 20:53
  • Hey, thank you @JohanWentholt Please, would you provide me some reference docs about it? – danicotra Jul 29 '18 at 21:01
  • I can't think of any references of the top of my head, but the concept is quite simple. `reject` is a function that takes 1 argument. `addEventListener` expects a function as second argument and provides 1 argument. So instead of forwarding the argument through an anonymous function to `reject`, just pass `reject` as the callback function. This can also be done if argument count doesn't match, but this leaves out arguments or results in some arguments being `undefined`. If you want to change the argument order you'll have to use an anonymous function. – 3limin4t0r Jul 29 '18 at 21:58
  • If someone has a reference please provide it below. – 3limin4t0r Jul 29 '18 at 22:00

1 Answers1

1

Arrow functions take this from the lexical context, with will just be the window object in this case. If you want the dynamic this you need to use a regular function like:

 img.addEventListener(`load`,function(){resolve(this)});


const loadImage = (src) => new Promise((resolve, reject) => {
        const img = new Image();
        // use `function()` instead of `()=>{}
        img.addEventListener(`load`,function(){resolve(this)});
        img.addEventListener(`error`,(event)=>reject(event));
        img.src=src;
    });
    
loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg')
.then(i => console.log(i))
Mark
  • 90,562
  • 7
  • 108
  • 148
  • So the problem is related to arrow function, not Promise... Thank you! I'd be very glad if you could provide some reference docs about the first line of your answer so to deepen my knowledge – danicotra Jul 29 '18 at 21:03
  • 1
    @danicotra for some quick info the [MDN Arrow Function Page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) might get you started. For a deep dive the book [You Don't Know JS: this & Object Prototypes](https://www.safaribooksonline.com/library/view/you-dont-know/9781491905142/) has tons of in-depth info. – Mark Jul 29 '18 at 21:07
  • Ok, thanks again :-) – danicotra Jul 29 '18 at 21:09