javascript - 为什么这个 javascript 值在它声明的范围内为空，但在更窄的范围内却不是

Question

假设我有以下代码，它使用 canvasResize 插件调整图像大小，然后返回处理后的 Blob 数据。

如果我将 f 变量的 alert 放在现在的位置，f 将不为 null。但是，如果我尝试在函数末尾返回之前立即检查 f 变量，那么它将为 null。

function resizeFile(file){
    var f=null;
    $.canvasResize(file,
        {
            width: 400,
            height: 0,
            crop: false,
            quality: 100,
            callback: function (data)
                {
                    // Add file data
                    f = $.canvasResize('dataURLtoBlob', data)
                    if(f!=null){
                                alert(f)
                            }
                            else{
                                alert("file blob is null")
                            }
                    $('body').css("background", "url("+data+")")
                }
        });


        return f;
    }

Answer 1

在您的代码中，f 变量在调整大小完成后执行的callback 函数中初始化。

因此，首先调用 return f，然后调用 callback 函数，因此它将为 null。