javascript - Overwrite and restore a function - Stack Overflow

admin管理员组

文章数量:1352152

I need to mock call a function in JavaScript. For this, I'm "saving" the function in a temporary variable, update the target with a new function block, calling the target and then restoring the old function:

var myObject = {
  myIntProp: 1,
  myFunc: function(value) {
    alert(value + 1);
  }
};
myObject.myFunc(2);

var tmp = myObject.myFunc;
myObject.myFunc = function(value) {
  alert(value - 1);
};
myObject.myFunc(2);

myObject.myFunc = tmp;
myObject.myFunc(2);

I need to mock call a function in JavaScript. For this, I'm "saving" the function in a temporary variable, update the target with a new function block, calling the target and then restoring the old function:

var myObject = {
  myIntProp: 1,
  myFunc: function(value) {
    alert(value + 1);
  }
};
myObject.myFunc(2);

var tmp = myObject.myFunc;
myObject.myFunc = function(value) {
  alert(value - 1);
};
myObject.myFunc(2);

myObject.myFunc = tmp;
myObject.myFunc(2);

This works as expected: the function gets overwritten and then successfully restored. My thought was to move this code into a helper function and easily use it when needed:

function FunctionSwapper(target, newFunction) {
  var old = target;
  target = newFunction;
  this.Restore = function() {
    target = old;
  }
};

var myObject = {
  myIntProp: 1,
  myFunc: function(value) {
    alert(value + 1);
  }
};
myObject.myFunc(2);

var swapp = new FunctionSwapper(myObject.myFunc, function(value) {
  alert(value - 1);
});
myObject.myFunc(2);

swapp.Restore();
myObject.myFunc(2);

This code however, does not save the current state nor is it replacing the targeted function. What am I missing here? Isn't a function always passed as reference? What are the main differences between the two code snippets?

(JSFiddle available, but prepare for 8 alerts...)

Edit: a fellow user has pointed out that the second method does not really differ from the first one and that it's probably not worth the trouble of creating the additional class; while I do understand and agree with their arguments, I see two advantages in the second method (both apply to my particular, real-world case):

1. it's easier/faster to write swapp.Restore(); than myNameSpace.level2.level3.level4.level5 = swap; when working with objects which have several levels of child elements and,
2. it abstracts the operation, providing a consistent use among the development team (additionally, logging or type proofing could be done inside the class).

• javascript
• function

Share Improve this question Follow edited Jul 27, 2015 at 17:48 Andrei V asked Jun 30, 2015 at 11:59 Andrei VAndrei V 7,50866 gold badges4747 silver badges7272 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

This happens because target is not a true reference, it is a value which references target function.

However when you reassign target, you do not modify the held value (the reference to the function), but you modify the value directly, which means you can't do it this way.

Instead you can pass the object holding the function to replace (it would only work with an object, since you need to access it later).

Here is what I came up with

function FunctionSwapper(target, name, newFunction) {
  var old = target[name];
  target[name] = newFunction;
  this.Restore = function() {
    target[name] = old;
  }
};

var myObject = {
  myIntProp: 1,
  myFunc: function(value) {
    alert(value + 1);
  }
};
myObject.myFunc(2);

var swapp = new FunctionSwapper(myObject, 'myFunc', function(value) {
  alert(value - 1);
});
myObject.myFunc(2);

swapp.Restore();
myObject.myFunc(2);

The FunctionSwapper is restoring its own copy of the function, but it has no connection to myObject (you don't pass it a reference to myObject).

This would work:

function FunctionSwapper(object,name,newFunction) {
  var old = object[name];
  object[name] = newFunction;
  this.Restore = function() {
    object[name] = old;
  }
};

...

var swapp = new FunctionSwapper(myObject, "myFunc", function(value) {
  alert(value - 1);
});

I believe by passing in myObject.myFunc, you actually break the reference from the myObject, so it doesn't actually update the myFunc call of myObject, it updates the local scope of the FunctionSwapper's copy.

Compare it to this, which carries out the operation on the object itself:

function FunctionSwapper(obj, funcName, newFunction) {
    var old = obj[funcName];
    obj[funcName] = newFunction;
    this.Restore = function() {
        obj[funcName] = old;
    }
};

var myObject = {
  myIntProp: 1,
  myFunc: function(value) {
    alert(value + 1);
  }
};
myObject.myFunc(2);

var swapp = new FunctionSwapper(myObject, "myFunc", function(value) {
  alert(value - 1);
});
myObject.myFunc(2);

swapp.Restore();
myObject.myFunc(2);

本文标签： javascriptOverwrite and restore a functionStack Overflow