javascript - 在 for 循环中设置 Javascript 变量

Question

我看了很多关于全局/局部变量的帖子，但我觉得我遗漏了什么。这就是我要达到的目标:

var commandList = {
    'command_a': function() {
        socket.emit({action: 'a'});
    },
    'command_b': function() {
        socket.emit({action: 'b'});
    }
};

我不想定义我的命令列表，而是想通过 ajax 调用动态定义它们。这是我最好的尝试:

function getCommands() {
    $.ajax({
        type:'get',
        url: '/getCommands',
        data: data,       
        success: function(data) {

            JSONdata = $.parseJSON(data);
        // [{"action": "b", "command": "command_b"},{"action": "a", "command": "command_a"}]

            var commandList = [];

            jQuery.each(JSONdata, function( i, val ) {

                command = val['command'];
                action = val['action'];

                service = {
                    [command]: function() {
                        socket.emit({action: [action]});
                    }
                console.log(service[Object.keys(service)[0]]);
                }
                commandList.push(service);
            });
        }
    });
}

主要问题是在我的循环中，我的 action 变量没有被 service 中的 a 或 b 替换，我认为这是因为 action 仅在调用函数时才定义。 console.log 返回:

function () {
                    socket.emit({action: [action]});
                }

代替:

function () {
                    socket.emit({action: 'a'});
                }

Answer 1

首先，始终使用 var 关键字声明您的变量。如果不这样做，它们将在全局范围内创建，污染它。更重要的是，不这样做会破坏你的代码，我稍后会解释。从现在开始，我将假设它们是用 var 正确声明的。

让我们首先将 socket.emit({action: [action]}); 替换为 socket.emit({action: action});。您的代码将正常运行，即，当您调用 service[Object.keys(service)[0]] 时，套接字将发出 {action: 'a'}。但是，您不会从控制台日志中获得预期的输出。控制台日志显示:

function () {
                socket.emit({action: action});
            } 

因为你就是这样定义函数的，所以你没有用字符串文字“a”来定义它。但这根本不是问题，因为 action 将在运行时被替换为“a”。在 javascript 中，函数是根据创建它们的范围的引用创建的，这意味着它们可以访问该范围内的任何变量，即使在该范围之外调用它们也是如此。这里有很好的解释http://javascript.info/tutorial/closures .

因此，总而言之，当 action 的值为“a”时，您的 command_a 函数将持有对 action 的引用，而您的 command_b当且仅当您声明了 var action!!!!

时，函数将持有对 action 的引用，当它的值为“b”时

请注意，如果您不使用 var action 声明 action，它将处于全局范围内，并且将保存最后一个值(即“a” ) 在你的代码执行之后。当调用 command_a() 或 command_b() 时，它们都会发出 {action: 'a'}，因为 action 存在于全局范围内。

最后一件事，您最初希望 commandList 是一个对象，但您使用的代码创建了一个数组。这会给你一个最初声明的对象:

function getCommands() {
$.ajax({
    type:'get',
    url: '/getCommands',
    data: data,       
    success: function(data) {

        JSONdata = $.parseJSON(data);
    // [{"action": "b", "command": "command_b"},{"action": "a", "command": "command_a"}]

        var commandList = {};

        jQuery.each(JSONdata, function( i, val ) {
            var command = val['command'];
            var action = val['action'];

            commandList[command] = function() {
                    socket.emit({action: action});
            };
        });
    }
});