如何在 JavaScript 中将对象返回到不同的范围？

Question

当我提交表单时，我想将表单中的一些数据作为对象返回，但我无法将数据置于正确范围内的对象中。我不确定为什么控制台在 onsubmit 事件处理程序中记录 newEvent 变量也会返回一个事件。

如何在外部范围内访问返回的表单数据？

JSFiddle：http://jsfiddle.net/antfish/crp98hhw/40/

var createTaskForm = document.getElementById('create-task'),
    newTask = new Object();

    //Returns empty object (I would like my returned object accessible in this scope)
    console.log(newTask);

function getFormData(id, newTask) {
    var createTaskForm = document.getElementById(id),
        formElements = createTaskForm.elements;

    createTaskForm.onsubmit = function(newTask) {
        var title = formElements['todo-title'].value,
            content = formElements['todo-content'].value;

        newTask.title = title;
        newTask.content = content;

        //Returns Event
        console.log(newTask);

        return newTask;

    }

}

getFormData('create-task');

Answer 1

通过将newTask 设置为getFormData 和createTaskForm.onsubmit 的输入参数，您将在这些函数的范围内重新声明该变量。要从外部范围访问值，您只需要引用它即可。

Answer 2

尽管定义 getFormData 接受 2 个参数，但您在没有第二个参数的情况下调用 getFormData。

但是getFormData 的第二个参数在函数体中无论如何都没有使用，所以我不知道它为什么在那里。

此外，从不使用全局定义的 createTaskForm 变量。

无论如何，如果您希望您在全局范围内定义的newTask 对象由getFormData 创建的回调分配给onsubmit，只需从getFormData 中删除newTask 参数和内部匿名函数。这样，两者都将关闭全局 newTask 对象（即引用它）并且提交事件将导致 newTask 被修改。

备注：getFormData 的命名很糟糕，因为它什么也不返回。它应该命名为setOnsubmitCallback 之类的。

例子：

var newTask = {}; // this is simpler than "new Object()"

function setOnsubmitCallback(formId)
{
    var createTaskForm = document.getElementById(id);
    var formElements = createTaskForm.elements;

    createTaskForm.onsubmit = function () {
        // do your stuff with the newTask object
    };
}

setOnsubmitCallback('create-task');

现在，每次触发提交事件时（例如，通过单击 <input type="submit"> 元素或其他内容）都会调用您的回调，并且 newTask 对象将包含适当的数据。

edit:console.log(newTask); 返回事件的原因如下：DOM（文档对象模型）是这样的：当它调用绑定到 DOM 事件的回调时（“onsubmit”作为其中之一），它将第一个参数传递给回调函数，该参数是一个事件对象。因此，当它调用你的回调时，newTask 的值就是那个事件对象。