How Can I Override A Function In Javascript

Question

I have the following scripts:

<script ... jquery-1.9.1.js"></script>
<script ... dataTables.js"></script>    
<script ... columnFilter.js"></script>

The following code exists in columnFilter.js:

(function ($) {

   $.fn.columnFilter = function (options) {
       //some code...

       function _fnCreateCheckbox(oTable, aData) {
           //some code...
       }

   };

})(jQuery);

What I would like to do is override function _fnCreateCheckbox(oTable, aData) with my own code. Im fairly new to javascript, so would appreciate an example.

I have tried simply grabbing the code above and adding it to it's own <script> tags, but that didn't work. It completely stopped the columnFilter.js from working (which is as expected I guess). Not really sure what else to try.

If you're new to JS you'll want to get a good grasp on how scope works, as the answer below indicates that was the root of your issue. — adamb
– adamb, Commented Mar 8, 2013 at 17:16

Leeish · Accepted Answer · 2013-03-08 17:17:54Z

8

function _fnCreateCheckbox(oTable, aData) {

Only exists in the scope in which it was created as (function ($) { creates a function scope. You must edit it there. You can't override it outside the function.

EDIT: On a related note

If you are crafty with JS and you are trying to get that function to do something else only sometimes, you could pass some extra variables into your columnFilter plugin/function call and handle them in that function to do something else. I have no idea what column filter is, but let's pretend to call it on an element like so:

el.columnFilter({optionA: true, optionB: false});

If you wanted to do something else based on some data you have you could do,

el.columnFilter({optionA: true, optionB: false, extraOption: true});

Then in your script, depending on what your entire script does:

$.fn.columnFilter = function (options) {
   //some code...
   if(options.extraOption){
       function _fnCreateCheckbox(oTable, aData) {
           //some default code...
       }
   } else {
       function _fnCreateCheckbox(oTable, aData) {
           //my other code...
       }
   }
};

This is a crude example, but just to display your options.

edited Mar 8, 2013 at 17:17

answered Mar 8, 2013 at 17:12

Leeish

5,2132 gold badges20 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Reinstate Monica Cellio Over a year ago

and also inside columnFilter ;)

GWed Over a year ago

ah nuts. That's what i thought, but was hoping there was some way around it

bgusach Over a year ago

Exactly. It's like a protected property. It's called closure.

Leeish Over a year ago

@Archer & Gaz_Edge Yes, if you simply copy the code from columnFilter.js to your own file, you could change the function to do whatever you wanted. But outside the scope you cannot.

alestanis · Accepted Answer · 2013-03-08 17:13:04Z

2

I suppose you import the columnFilter.js file from some external source.

One option could be to copy the columnFilter.js file to your project's directory, modify it as you please and then import it from your project's directory.

answered Mar 8, 2013 at 17:13

alestanis

22k4 gold badges50 silver badges67 bronze badges

Comments

Malk · Accepted Answer · 2013-03-08 17:15:11Z

1

You can override a function by reassigning its prototype. It is generally advised against though.

var d = new Date();

alert(d.getFullYear()); // 2013

Date.prototype.getFullYear = function() { return "Full Year"; }

alert(d.getFullYear()); // "Full Year"

http://jsfiddle.net/js5YS/

answered Mar 8, 2013 at 17:15

Malk

12k4 gold badges35 silver badges34 bronze badges

2 Comments

GWed Over a year ago

why is it advised against?

Malk Over a year ago

Changing the prototype has global implications; it changes the object and any instance of the object (including inherited objects); previously instantiated objects included. It is especially worrisome on standard javascript classes like Math and Array where the class is often inherited. I have several libraries that use Date.getFullYear(). The code above would break all of them.

Collectives™ on Stack Overflow

How Can I Override A Function In Javascript

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related