JavaScript 中函数参数的范围

Scope of function parameters in JavaScript

本文关键字：范围 参数 函数 JavaScript      更新时间：2023-09-26

我试图使一些jQuery函数更容易实现，所以我试图将一些自动完成逻辑封装到一个函数中，以允许用户发送URL的变量，Web服务的参数和我们需要取值的控件。使用以下脚本，我收到错误：response is not defined . 这个想法是，在这个 Web 服务中，将有许多不同的方法具有自动完成功能，我可以简单地将相应方法的名称及其参数传递给 Complete 方法，并在多个文本框上具有该功能。
为什么会这样 

 $(document).ready(function ()
        {
            $('#auto').autocomplete(
            {
                source: function (request, response)
                {
                    Complete('GetNames', 'hospitalName', '#auto');
                }
            });
            function Complete(url, varName, target)
            {
                $.ajax(
                    {
                        type: "POST",
                        url: "Service.asmx/" + url,
                        data: "{'" + varName + "':'" + $(target).val() + "'}",
                        dataType: "json",
                        contentType: "application/json",
                        success: function (data)
                        {
                            //uncaught reference error response is not defined
                            response(data.d);
                        },
                        error: function (xhr)
                        {
                            console.log(xhr.status);
                        }
                    });
            }
        });

在我尝试取出 AJAX 调用并使其成为自己的方法之前，这工作正常。 我想知道

  1. 源函数正在调用 Complete 函数，源函数具有 request 和response作为参数，那么为什么在我的脚本中没有定义它们呢？
  2. 我如何解决此问题并避免#1中的未来问题。

以前它之所以有效，是因为变量 response 在 ajax 成功回调方法的闭包范围内可用。由于您现在创建了一个单独的方法，因此 ajax 回调不在源方法的闭包范围内，因此您需要将request和response参数作为参数传递给 Complete 方法

$(document).ready(function () {
    $('#auto').autocomplete({
        source: function (request, response) {
            Complete(request, response, 'GetNames', 'hospitalName', '#auto');
        }
    });
    function Complete(request, response, url, varName, target) {
        $.ajax({
            type: "POST",
            url: "Service.asmx/" + url,
            data: "{'" + varName + "':'" + $(target).val() + "'}",
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                //uncaught reference error response is not defined
                response(data.d);
            },
            error: function (xhr) {
                console.log(xhr.status);
            }
        });
    }
});
你可以

通过将值传递给Complete来做到这一点，就像Arun P Johny的答案一样。您还可以在 source: 函数中将Complete设置为闭包：

$(document).ready(function () {
    $('#auto').autocomplete({
        source: function (request, response) {
            Complete('GetNames', 'hospitalName', '#auto');
            function Complete(url, varName, target) {
                var data = [];
                data[varname] = $(target).val();
                $.ajax({
                    type: "POST",
                    url: "Service.asmx/" + url,
                    data: JSON.stringify(data),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (xhr) {
                        console.log(xhr.status);
                    }
                });
            }
        }
    });
});

由于它嵌套在该函数中，因此可以访问其局部变量。

但是，如果您首先将 AJAX 代码拉出source:选项之外的原因是您希望能够从其他地方调用它（以便您可以传递不同的 URL、目标或变量名称），这将不起作用 - 该函数只能从该函数内部访问。

附言不要试图以这种方式构建自己的JSON，请使用我所展示的JSON.stringify()。

相关文章：