为什么这个javascript值在声明的范围内为null，但不在较窄的范围内

Question

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

如果我将alert变量f放在现在的位置，f将不为空。但是，如果我尝试在函数结束时返回之前检查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。