Question

我已经搜索过这个但是到目前为止还没有找到重复的内容，我可能会使用错误的关键字......

我正在尝试暂时更改存储在对象中的函数，但我无法将其设置回原来的状态。

考虑一下：

// Set the options object
var options = {
    success: function(){
        console.log('Original Function Called');
    }
}

// Save the options
$('#foo').data('bar',options);

然后在另一个函数中：

// Get the options
var options = $('#foo').data('bar');

// Store the old options
var old_options = options;

// Temporarily change the success function
options.success = function(){
    console.log('Temporary Function Called');
}

// Save the options
// This allows the other functions to access the temporary function
$('#foo').data('bar',options);

// Do stuff here that uses the new options

// Reset the options to include the original success function
$('#foo').data('bar',old_options);

我原本希望只显示Temporary Function Called一次，但它似乎完全用临时回调替换旧的success回调。

有谁能告诉我为什么以及如何解决这个问题？

更新

我认为extend可以解决这个问题，但似乎问题可能会更深一些。我这次决定发布我的实际代码片段。在阅读之前请注意以下事项：

SM几乎只是jQuery的别名，请忽略它。
success和error是提供给函数的参数

这是我的代码：

// Get the properties
var properties = $(form).data('autosave');
switch(parameter){
    case 'save':
        var old_properties = $.extend({},properties);
        // Set the new callbacks if they have been supplied
        properties.options.success = typeof success!=='undefined' ? success : old_properties.options.success;
        properties.options.error = typeof error!=='undefined' ? error : old_properties.options.error;
        // Save the properties
        $(form).data('autosave',properties);
        // Call the save method before setting the interval
        SM(form)._as_save();
            properties = $.extend({},old_properties);
        // Save the old properties
        $(form).data('autosave',properties);
        // Clear the current interval
        clearInterval(properties.interval);
        // Call the save method periodically
        properties.interval = setInterval(function(){
        SM(form)._as_save();
        },properties.options.interval);
    break;
}
// Save the properties
$(form).data('autosave',properties);

Answer 1

运行此代码时：

var old_options = options;

您没有制作可以在以后恢复的整个options对象的副本。您只是将引用保存到同一对象。换句话说，old_options与options是完全相同的对象，因此当您将新值分配到options.success时，您需要在options <中更改它em>和 old_options - 因为它们是同一个对象。

要解决此问题，您可以使用对象克隆功能制作对象的副本，然后可以将其还原。由于您正在使用jQuery，因此您可以将上面的行更改为：

var old_options = $.extend( true, {}, options );

现在，当您更改options.success时，您只需在options对象中更改它。 old_options不受影响，因此您之后的通话将成功恢复：

$('#foo').data('bar',old_options);

有趣的是，即使options.success是异步回调（听起来可能来自名称），这仍然可以正常工作。这是因为无论以后使用.success()方法调用什么代码，它们仍应保留对已修改options对象的引用 - 即使您已将旧版本恢复原状在此期间进入元素的数据。至少有一个人希望这样;如果其他代码重新进入$().data()以找到.success回调，那么您就遇到了麻烦。

上面的$.extend()调用是＆＃34;深＆＃34; （递归）options对象的副本。也就是说，如果options中的一个属性本身就是一个对象，它也会克隆该对象而不是仅复制对它的引用。

如果省略true参数，$.extend()会执行浅层复制：

var old_options = $.extend( {}, options );

这仍然会创建一个新对象，并复制现有对象的所有属性，但如果其中一个属性本身就是一个对象，它不会克隆该对象，它只是复制一个引用。如果它适用于您正在使用的对象的结构，则效率更高，否则您可以使用深层复制。

如果您需要保存和恢复的属性/方法是主对象的直接子项，则浅层副本就足够了。在这种情况下，您肯定需要深层复制：

{
    url: 'test',
    events: {
        success: function( data ) {
            // ...
        }
    }
}

这里我们有一个带有events属性的对象，该属性本身就是一个对象，它有自己的一些属性/方法（在本例中是一个events.success()方法。如果你做一个浅拷贝在这个对象中，原始文件和副本将共享一个共同的events对象。所以，如果你做了类似的事情：

options.events.success = function(...) {...};

您实际上正在同时更新options和old_options中的内容。不好。那就是需要深层复制的地方。

Answer 2

问题是options具有引用语义：

// Store the old options
var old_options = options;

这个评论在于。您没有旧选项的副本;相反，你有另一个引用到同一个选项对象（你可以用它来引用它的另一个名称）。

因此，当您覆盖options.success时，此更改也会在old_options上显示。使用.data存储和还原选项值的代码是多余的。

你唯一需要做的就是：

var old_success = options.success;
options.success = function() { /* whatever */ };

// code that uses the new success callback

options.success = old_success; // restore original value

Answer 3

您的问题是您正在使用对象。您正在传递对该对象的引用。底层对象是相同的，你所做的就是添加一个指向同一地址的变量。

您必须克隆该对象。 EG创建一个具有相同属性的新对象并将其复制。

此post可能对您有用。

Answer 4

执行此操作var old_options = options时，您不是要复制options值，而是复制参考。从现在开始，old_options和options指向同一个记忆点，其中任何一个的变化都会影响到两者。

存储对象/变量中的函数引用

4 个答案: