Question

好的，这是我的情况。我有一个JavaScript类，处理AJAX表单提交和其他相关的同步和异步请求。它收集数据，然后将此数据设置为请求的临时存储，然后使用临时存储数据发出请求。

例如：

用户开始构建请求，将NAME和LAST NAME放入表单
此数据放入对象变量SUBMITDATA
请求时，此数据将克隆到另一个变量TEMPSUBMITDATA
请求完成后，用于发出请求的数据仍然可用（用于调试或其他目的）

这意味着如果两个请求同时通过同一个对象进行，那么我仍然可以访问用于发出这些请求的数据。

一切都按预期工作，直到我想使用HTML5 FileList和FormData。虽然我可以相对轻松地在JavaScript中克隆对象，但我无法克隆FileList。这是一个例子：

<html>
<head>
    <script type="text/javascript">
        // This method is used to clone data objects
        function clone(object){
            if(object==null || typeof(object)!=='object'){
                return object;
            }
            // This line throws the error when FileList data is attempted to be cloned
            var tmp=object.constructor();
            for(var key in object){
                tmp[key]=clone(object[key]);
            }
            return tmp;
        }

        // This is an example data storage
        var submitData=new Object();
        submitData['some-data']='abc';

        function uploader(files){

            submitData['my-files']=files;

            // This clones the object and leads to the error because of FileList
            var tempSubmitData=clone(submitData);

            // HERE WOULD THE ACTUAL FORM SUBMIT HAPPEN
            // THIS EXAMPLE IS SHOWN FOR EASIER READING OF
            // THE PROBLEM EXPLAINED ABOVE

        }
    </script>
</head>
<body>
    <input type="file" name="myfile" value="" onchange="uploader(this.files);"/>
</body>

这引出了我的问题，我可以 - 完全 - 以任何方式克隆这种类型的数据，以便我可以存储它直到请求完成？或者真的是每次制作一个新对象的唯一方法吗？

新的对象解决方案对我不好，因为我的类就像一个单独的应用程序一样，它有一个日志和其他数据，这对后来的请求跟踪非常有用，并且它在每种情况下都能很好地工作 - 直到现在我绊倒了在HTML5上使用FileList和FormData。

任何帮助将不胜感激！

Answer 1

如果您使用的是jQuery，则可以使用extend方法克隆此类对象。

var clonedObject = $.extend(true,{},yourObject);

如果你不是，你可以使用本地Object.create()

var clonedObject = Object.create(yourObject);

最后一个不是副本（而是空对象，前者的属性和函数作为其原型的一部分，如果我没有记错的话，但它是相似的，我认为在这种情况下它会对你有用。

在JavaScript中克隆FileList对象以进行文件上传？

1 个答案: