Javascript ajax调用后丢失了一个变量。另一个发现

在函数中，我运行以下代码：

var docTypeWorkArea = $(this).parents("#docTypeWorkArea");
    var workArea = GetWorkArea($(this));
    var name = workArea.find("#documentType :selected").text();
    var typeId = workArea.find("#documentType :selected").val();
    var nOrder = $(this).parents(".documentTypes").find("[rowId]").length + 1;
    $.ajax({
        type: "POST",
        url: "../Component/SaveDocumentType",
        cache: false,
        async: false,
        data: {
            name: name,
            nOrder: nOrder,
            typeId: typeId
        },
        success: function (result) {
            var newRowElement = workArea.find("#trNewRowDocType");
            newRowElement.show();
            newRowElement.before(result);
            docTypeWorkArea.remove();
        }
    });

---

当我在success函数中设置断点并尝试在控制台（googlechrome）中调用变量“typeId”时，它显示为未定义。但是变量“workArea”（也是在Ajax调用之前定义的）仍然有其价值。这两个变量之间的区别是什么？

了解JavaScript闭包的工作原理有助于：

只有内部函数使用的变量被放入闭包范围。

让我们看看下面的例子：

var functionOne = function(){
    var a = 1,
        b = 2,
        c = 3;
    function functionTwo(){
       console.log("b = " + b); //put debug point here
    }
    functionTwo();
}
functionOne();

这里，外部函数“functionOne”有3个局部变量a、b和c。内部函数“functionTwo”可以访问所有这些变量，但是，这里实际上只使用了“b”，因此，当JavaScript引擎创建闭包时，只有b会被放入闭包范围。这有助于减少内存占用

如果您将调试点放在我在代码中提到的位置，并在控制台中键入“b”，您将得到b的值，但如果键入“a”或“c”，您将得到未定义的值

如果在内部函数“functionTwo”中添加“c”或“a”的用法，如下所示：

var functionOne = function(){
    var a = 1,
        b = 2,
        c = 3;
    function functionTwo(){
       console.log("b = " + b); //put debug point here
       console.log("c = " + c);
    }
    functionTwo();
}
functionOne();

现在，您将能够在控制台中的指定调试点看到它们的值。因为现在它们也被内部函数实际使用

这就是为什么您可以访问“workArea”，但不能访问“typeId”。因为“typeId”未在success函数中使用

在success函数中使用“typeId”，您也可以在调试时在控制台中访问它

success: function (result) {
    var newRowElement = workArea.find("#trNewRowDocType");
    newRowElement.show();
    newRowElement.before(result);
    docTypeWorkArea.remove();
    console.log("typeId: " + typeId);
}

---

了解JavaScript闭包的工作原理有助于：

只有内部函数使用的变量被放入闭包范围。

让我们看看下面的例子：

var functionOne = function(){
    var a = 1,
        b = 2,
        c = 3;
    function functionTwo(){
       console.log("b = " + b); //put debug point here
    }
    functionTwo();
}
functionOne();

这里，外部函数“functionOne”有3个局部变量a、b和c。内部函数“functionTwo”可以访问所有这些变量，但是，这里实际上只使用了“b”，因此，当JavaScript引擎创建闭包时，只有b会被放入闭包范围。这有助于减少内存占用

如果您将调试点放在我在代码中提到的位置，并在控制台中键入“b”，您将得到b的值，但如果键入“a”或“c”，您将得到未定义的值

如果在内部函数“functionTwo”中添加“c”或“a”的用法，如下所示：

var functionOne = function(){
    var a = 1,
        b = 2,
        c = 3;
    function functionTwo(){
       console.log("b = " + b); //put debug point here
       console.log("c = " + c);
    }
    functionTwo();
}
functionOne();

现在，您将能够在控制台中的指定调试点看到它们的值。因为现在它们也被内部函数实际使用

这就是为什么您可以访问“workArea”，但不能访问“typeId”。因为“typeId”未在success函数中使用

在success函数中使用“typeId”，您也可以在调试时在控制台中访问它

success: function (result) {
    var newRowElement = workArea.find("#trNewRowDocType");
    newRowElement.show();
    newRowElement.before(result);
    docTypeWorkArea.remove();
    console.log("typeId: " + typeId);
}

---

您确定typeId的值在ajax调用之前未定义吗？在ajax调用之前已定义。您确定typeId的值在ajax调用之前未定义吗？在ajax调用之前已定义。