我已经四处搜索，但到目前为止还没有找到重复项，我可能使用了错误的关键字...

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

考虑一下:

// 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 可以解决这个问题，但似乎这个问题可能更深一些。这次我决定发布我的实际代码片段。阅读前请注意以下事项:

1. SM 只是jQuery 的别名，请忽略它。
2. 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);

最佳答案

当您运行这段代码时:

var old_options = options;

您没有为以后可以恢复的整个 options 对象制作副本。您只是将引用保存到相同的对象。换句话说，old_options 与 options 是完全相同的对象，因此当您将新值分配给 options.success 时，您正在更改它在 options 和 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() 调用执行了 options 对象的“深度”(递归)复制。也就是说，如果 options 中的其中一个属性本身就是一个对象，它还会克隆该对象，而不是仅仅复制对它的引用。

如果您省略 true 参数，$.extend() 将执行浅拷贝:

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

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

如果需要保存和恢复的属性/方法是主对象的直接子对象，浅拷贝就足够了。在这种情况下，您肯定需要深拷贝:

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

这里我们有一个具有events属性的对象，该属性本身就是一个具有一些属性/方法的对象(在这个例子中是一个events.success() 方法。如果您对此对象进行浅拷贝，则原始对象和副本将共享一个公共(public)events 对象。因此，如果您执行如下操作:

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

您实际上会在 options 和 old_options 中更新它。不好。这就是需要深度复制的地方。

关于javascript - 在对象/变量中存储对函数的引用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17201074/