javascript - 如何理解普通函数和箭头函数中的 `this`？

Question

我想加载远程图像以获取其高度和宽度，但得到不同的结果。

下面的代码给出了正确的图像高度和宽度

img.onload= function() {
                    console.log('image;', this.width, this.height);
                    ctx.drawImage(img, 0, 0, width, height);
                };
img.src = url;

但是如果我使用如下箭头函数，我得到了高度和宽度的 undefined 值:

img.onload=() => {
                    console.log('image;', this.width, this.height);
                    ctx.drawImage(img, 0, 0, width, height);
                };
img.src = url;

谁能告诉我为什么我不能在箭头函数中得到它？我怎样才能获得箭头函数的大小？

Answer 1

箭头函数没有自己的 this 绑定(bind)，因此它使用它关闭的那个。

要获取它，请定义一个 event 参数。并使用 event.currentTarget.width。

img.onload = event => {
  console.log('image;', event.currentTarget.width, event.currentTarget.height);
  ctx.drawImage(img, 0, 0, width, height);
};