javascript - 变量作用域位于方法之外

Question

我不明白这怎么可能。这些属性在方法外部分配 (image.onload=function())& 在方法写入之后..

image.src="barn.jpg";
canvas.width=500;

但是在方法内部使用这些属性。它的变量作用域怎么样？

 var canvas=document.getElementById("myConvas");
                    var ctx=canvas.getContext("2d");

                    var image=new Image();

                    image.onload=function(){

                        ctx.drawImage(image,0,0,canvas.width,canvas.height);

                    }
                    image.src="barn.jpg";
                    canvas.width=500;

Answer 1

image.src 导致 barn.jpg 开始下载，但浏览器还将继续执行 image.src 之后的所有代码。

因此，在下载图像时，浏览器还会执行 canvas.width=500。

图像完全加载后，它会返回并执行 image.onload 函数内的任何代码。

因此您的代码实际上按以下顺序执行:

1. var canvas=document.getElementById("myConvas");
2. var ctx=canvas.getContext("2d");
3. var image=new Image();
4. 当图像完全加载时，浏览器会记录调用image.onload。但浏览器实际上还没有执行 .onload 代码。
5. image.src="barn.jpg";
6. canvas.width=500;
7. ctx.drawImage(image,0,0,canvas.width,canvas.height);