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](http://stackoverflow.com/a/500459/1538708), as the answer below indicates that was the root of your issue. — adamb, Mar 08 '13 at 17:16

Leeish · Accepted Answer · 2013-03-08T17:17:54.117

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.

ah nuts. That's what i thought, but was hoping there was some way around it — GWed, Mar 08 '13 at 17:13
Exactly. It's like a protected property. It's called closure. — bgusach, Mar 08 '13 at 17:13
@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. — Leeish, Mar 08 '13 at 17:15

score 2 · Answer 2 · answered Mar 08 '13 at 17:13

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 08 '13 at 17:13

alestanis

21,519
4
48
67

score 1 · Answer 3 · answered Mar 08 '13 at 17:15

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 08 '13 at 17:15

Malk

11,855
4
33
32

why is it advised against? – GWed Mar 08 '13 at 17:16
1

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. – Malk Mar 08 '13 at 17:28

How Can I Override A Function In Javascript

3 Answers3