How to properly extend some Javascript object function?

Question

I'm trying to create a Postbox addon (Postbox is a mail client based on Thunderbird) and I'm having a small problem. I'm far from being a Javascript expert and I can't understand the problem behind this...

I'm trying to extend some object function from the Postbox code. The code is quite big, so I tried to create a small example to demonstrate my problem. The following code is a sample of the original Postbox code structure:

FolderTreeView.prototype = {

    init: function FTV__init() {
        alert("init");
    },

    _ensureValidRow: function FTV__ensureValidRow(aRow) {
        alert("_ensureValidRow");
    },

    getCellProperties: function FTV_getCellProperties(aRow, aColumn, aProperties) {
        this._ensureValidRow(aRow);
    }

}

function FolderTreeView() {
    this._tree = null;
    this.init();
}

var gFolderView = new FolderTreeView();

I cannot change this code cause when Postbox gets updated, the code would revert to the original source and it would be a pain to maintain that.

The following is my own code, trying to extend the getCellProperties function:

MyExtension = {

    init: function() {
        MyExtension.FolderIcon.load();
    },

    FolderIcon: {
        load: function() {
            var oGetCellProperties = gFolderView.getCellProperties;

            gFolderView.getCellProperties = function FTV_getCellProperties(aRow, aColumn, aProperties) {
                oGetCellProperties(aRow, aColumn, aProperties);
            }

            gFolderView.getCellProperties(null, null, null);
        }
    }

}

Now, oGetCellProperties is calling the original function, which in turn tries to call this._ensureValidRow but it fails. The error console reports that:

this._ensureValidRow is not a function

pimvdb · Accepted Answer · 2011-12-14 15:43:31Z

1

a.b() sets the this value inside b to a. Saving it does not:

a.b(); // sets `this` value inside `b` to `a`

var c = a.b;

c(); // does *not* set `this` value inside `b` to `a`

So where you have:

var oGetCellProperties = gFolderView.getCellProperties;
// gFolderView is lost as `this` value

You rather want .bind. .bind is only available in newer browsers, but there are shims for older browsers.

var oGetCellProperties = gFolderView.getCellProperties.bind(gFolderView);
// force `this` value

Or you can set the this value each time you call, using .call:

//                      `this`       argument1, ...
oGetCellProperties.call(gFolderView, aRow,      aColumn, aProperties);

answered Dec 14, 2011 at 15:43

pimvdb

155k80 gold badges313 silver badges357 bronze badges

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

2 Comments

Adam Rackis Over a year ago

This is a great answer; I love the ES5 additions, but OP might want to check this table to see if his target browser(s) are supported. kangax.github.com/es5-compat-table

rfgamaral Over a year ago

This is not to run on a browser per se, it's a Postbox/Thunderbird extension. I just tested the bind and call methods in the extension and both worked fine :)

Adam Rackis · Accepted Answer · 2011-12-14 15:52:32Z

The root of your problem is that functions invoke with function invocation—some function just being called, as opposed to being invoke on an object

someFunction();

always, always set this to the global object. You can get around this by invoking the function with call, which allows you to specify what you want this to be equal to

gFolderView.getCellProperties = function FTV_getCellProperties(aRow, aColumn, aProperties) {
       oGetCellProperties.call(gFolderView, aRow, aColumn, aProperties);
}

apply would work too, but it expects its arguments to be passed as an array, which is slightly less convenient in your case.

gFolderView.getCellProperties = function FTV_getCellProperties(aRow, aColumn, aProperties) {
       oGetCellProperties.apply(gFolderView, [aRow, aColumn, aProperties]);
}

Collectives™ on Stack Overflow

How to properly extend some Javascript object function?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related