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

Question

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

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

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.