Overriding a JavaScript Function While Referencing the Original

Overriding a JavaScript function while referencing the original

You could do something like this:

var a = (function() {
    var original_a = a;

    if (condition) {
        return function() {
            new_code();
            original_a();
        }
    } else {
        return function() {
            original_a();
            other_new_code();
        }
    }
})();

Declaring original_a inside an anonymous function keeps it from cluttering the global namespace, but it's available in the inner functions.

Like Nerdmaster mentioned in the comments, be sure to include the () at the end. You want to call the outer function and store the result (one of the two inner functions) in a, not store the outer function itself in a.

Override function (e.g. alert) and call the original function?

Store a reference to the original function in a variable:

(function() {
    var _alert = window.alert;                   // <-- Reference
    window.alert = function(str) {
        // do something additional
        if(console) console.log(str);
        //return _alert.apply(this, arguments);  // <-- The universal method
        _alert(str);                             // Suits for this case
    };
})();

The universal way is <original_func_reference>.apply(this, arguments) - To preserve context and pass all arguments. Usually, the return value of the original method should also be returned.

However, it's known that alert is a void function, takes only one argument, and does not use the this object. So, _alert(str) is sufficient in this case.

Note: IE <= 8 throws an error if you try to overwrite alert, so make sure that you're using window.alert = ... instead of alert = ....

How to override a JavaScript function

var origParseFloat = parseFloat;
parseFloat = function(str) {
     alert("And I'm in your floats!");
     return origParseFloat(str);
}

How to override global functions in JavaScript, but keep a reference to the original function?

Here's a demo

var origConfirm = window.confirm; //store for future use

​window.confirm = function(msg){   //override
     alert(msg);   
}

window.confirm('override!');      //should now be an alert
origConfirm('old confirm');       //the old confirm

Overriding Javascript Functions?

You can just define the function again, it will overwrite the previously defined function:

<script src="helloworld.js">
    function buildDropdown(){
        /* Old Function */
    }
</script>
...
<script src="yourScript.js">
    function buildDropdown(){
        /* New code here */
    }
</script>

Unable to overwrite JavaScript function from another framework

Can you just change this function yourself:

$(function()
{
    var someObject = { 'a':'aaa' }
    $('input').keypress(createHandler(someObject,dosomething));
});

Or reassign the keypress handler yourself. That function is binding dosomething to the event before you have a chance to change dosomething yourself.

How do I override a javascript function that is inside another file?

If you declare the overload later that should be the function that executes

function alerttest(){
alert("1");
}

function alerttest(){
alert("2");
}

alerttest();

Here is another answer:
Overriding a JavaScript function while referencing the original

How to override a function in a Javascript class, and call the base function

When you use

NoProto.Shape.call(this, "square")

this assigns the Shape's doStuff to the current instantiation, if that's what you want. So, now this.doStuff will reference the original doStuff function from NoProto.shape. If you want to overwrite the doStuff function on the current instantiation while being able to call the original doStuff, save a reference to the old doStuff before assigning to this.doStuff:

var thing = function(colour){
  NoProto.Shape.call(this, "square");
  const oldDoStuff = this.doStuff;
  this.doStuff = function(){
    var val = oldDoStuff();
    return val + ', which is '+ colour;
  };
};

Live snippet:

var NoProto = NoProto || {};
NoProto.Shape = (function(){  var thing = function(name){    var privateData = 'this is a ' + name;
    var self = this;    this.base = function(){      return self;    };
    this.doStuff = function(){      return privateData;    };  };
  return thing;})();
NoProto.Square = (function(){  var thing = function(colour){    NoProto.Shape.call(this, "square");    const oldDoStuff = this.doStuff;    this.doStuff = function(){      var val = oldDoStuff();      return val + ', which is '+ colour;    };  };
  thing.prototype = Object.create(NoProto.Shape.prototype);
  return thing;})();
var noProtoSqr = new NoProto.Square('blue');try {  console.log(noProtoSqr.doStuff()); // ---> Stack Overflow!} catch (e){  console.error('There was an error: ' + e);}

Override javascript function while preserving the original context

What about saving the old function and then overwriting it like:

var old = httpProxy.HttpProxy.prototype.proxyRequest;
httpProxy.HttpProxy.prototype.proxyRequest = function () {
  old.apply(this, arguments);
  //do more stuff
}

taken from Javascript: Extend a Function

---

Related Topics