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绑定，所以它使用它关闭的那个。

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

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

如何在正常函数和箭头函数中理解`this`？

1 个答案: