Override JavaScript (window) Function

Question

I'd like to override a function which is being made by a javascript plugin. I know how to override regular window functions, but this is different. I'm not sure how to name it, but the structure of that function is like:

window.something.function

I have no idea how to override that. I have tried the following:

var originalFunction = window.something.function;
window.something.function = function(parameter) {
    alert('called');
    return originalFunction(parameter);
}

But it's not working.

Does someone know a solution?

Edit: As I have been told my question is unclear, I have edited it again using the actual names of the plug-in.

The plugin is meant to be used as:

var myColor = new jscolor(target, options)

When this is being used, there is a function "inside" the object "jscolor" which is being called when setting the value of target element. I want to override that function to add an extra functionality without changing the original js file.

Code:

if (!window.jscolor) { window.jscolor = (function () {


var jsc = {
    .....
    jscolor : function (targetElement, options) {
        ....
        //Function I want to change:
        this.exportColor = function (flags) {
            if (!(flags & jsc.leaveValue) && this.valueElement) {
                var value = this.toString();
                if (this.uppercase) { value = value.toUpperCase(); }
                if (this.hash) { value = '#' + value; }

                if (jsc.isElementType(this.valueElement, 'input')) {
                    this.valueElement.value = value;
                } else {
                    this.valueElement.innerHTML = value;
                }
            }
        }
    }
};

My attempts so far:

var origJsColor = jscolor.exportColor;
jscolor.exportColor = function(flags) {
    console.log('called');
    return origJsColor(flags);
}

and the window attempt above.

You can try to run window.something.function() immediate after your function definition to see if the defined function is implemented as you want. — Jimmy Ko
– Jimmy Ko, Commented Jun 9, 2016 at 13:29
I updated my question. @JimmyKo Thanks for your reply. My function is being called (which is obvious), but I'm getting the error "originalFunction" is not a function. — Stefan R
– Stefan R, Commented Jun 9, 2016 at 13:39
@T.J.Crowder Apologies. I hope it is much more clear right now. — Stefan R
– Stefan R, Commented Jun 9, 2016 at 14:07
I believe this actually means it's a private class, so I won't ever be able to override jscolor.exportColor since exportColor is being called as "this.exportColor". Am I right? — Stefan R
– Stefan R, Commented Jun 9, 2016 at 14:24
@stefan1294: Much clearer now, nice one. I do suggest consolidating it into one cohesive question "Edit" and "Edit 2", that's how it's normally done here at SO. Meanwhile, I've answered it. You can override exportColor, but you have to do it on an instance-by-instance basis. Fortunately, you can override jscolor in order to do that. — T.J. Crowder
– T.J. Crowder, Commented Jun 9, 2016 at 14:26

T.J. Crowder · Accepted Answer · 2016-06-09 14:31:16Z

The jscolor code you've shown creates an object with its own copy of exportColor (one is created for each object). So to replace it, you have to replace it on each instance as the instance is created.

You can do that as a one-off in much the way you showed, just working with the instance rather than the plugin function, and using Function#call to call it with the right this:

// Get the instance
var c = new jscolor(target, options)

// Update it
var origExportColor = c.exportColor;
c.exportColor = function(flags) {
    console.log('called');
    return origExportColor.call(c, flags); // Note the changes on this line
};

Or instead of

return origExportColor.call(c, flags);

you might use

return origExportColor.apply(c, arguments);

...if there's any chance of the function being called with anything other than exactly one argument. (arguments is a magic pseudo-array containing the arguments used to call the function.)

If you want to do that for all instance you might create, you can put a facade in front of jscolor to do that to each instance:

var realJscolor = jscolor;
jscolor = function() {
    // Call the real function, passing along all the arguments we
    // get automatically (`arguments` is a magic pseudo-array)
    var retVal = realJscolor.apply(this, arguments);

    // If it returned a non-`null` object, we want to use that instead
    // of `this`; if not, we keep using `this`
    if (!retVal || typeof retVal !== "object") {
        retVal = this;
    }

    // Slip in our version of exportColor
    var origExportColor = retVal.exportColor;
    retVal.exportColor = function(flags) {
        console.log('called');
        // (Maybe use `apply` here instead)
        return origExportColor.call(retVal, flags);
    };

    // Return the result, in case the real function overrode `this`
    return retVal;
};
jscolor.prototype = realJscolor.prototype;

Then just use jscolor normally:

var c = new jscolor(target, options);

The reason for the retVal thing is that although normally a new expression's result is a refernece to the new object created by new, a constructor function can return a non-null object reference and, if it does, the new expression's result is that object reference instead. That's why we check the return value of realJscolor.

Of course, that means that all uses of jscolor on the page that use the global will now use your updated function instead. If you don't want that, just use your own name and don't override jscolor:

var myColor = function() {
    var retVal = jscolor.apply(this, arguments);
    // ...and so on...
    return retVal;
};
myColor.prototype = jscolor.prototype;

Usage:

var c = new myColor(target, options);

Thank you very much for this excellent explanation. I learned a lot by this answer.

Little Alien · Accepted Answer · 2016-06-09 13:46:21Z

0

Function

function a() {alert(this)} // will print `window` obejct

is defined in the window scope. That is, it is a method of the window. Your more difficult situation comes from the fact that this is different from window if you define function as a method in another object.

var a = {method: function() {alert(this)}}

you call a.method() but see that the same window again. You need to bind your function to the parent object to make it compete method.

answered Jun 9, 2016 at 13:46

Little Alien

1,10413 silver badges23 bronze badges

Collectives™ on Stack Overflow

Override JavaScript (window) Function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related