How to reference a function from JavaScript class method

Question

I use SWFAddress for deep linking my site (link to SWFAddress). I like to break code into classes so I have a main structure similar to this:

function SomeClass() {
    // This adds the this.handleChange() function to the
    // SWFAddress event listener
    this.initializeSWFA = function() {
        // SWFAddress variable is instantiated in SWFAddress javascript file
        // so I can use it here
        SWFAddress.addEventListener(SWFAddressEvent.CHANGE, this.handleChange);
    }

    // SWFAddress is supposed to call this function
    this.handleChange = function(evt) {
    // Some code here
    }

}

// Instantiate the SomeClass
var someVar = new SomeClass();
someVar.initializeSWFA();

This line does not work here:

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, this.handleChange);

I tried changing it to:

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, this.handleChange());

or

var self = this;
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, self.handleChange);

And these don't work either.

So how do I reference a JavaScript function from a class in a situation like this?

If the function handleChange would be outside of the class I can write the function's name.

First, thank you for all the answers. I am still trying to figure how this all works in JavaScript. I am not used to the object oriented model like here in JavaScript.

This is the solution for now. I still can't figure out how to do this nicely in JavaScript, but this solution works. I tried to implement the solution suggested by ehudokai (thank you), however I was not able to make it work.

function SomeClass() {
    // This adds the this.handleChange() function to the
    // SWFAddress event listener
    this.initializeSWFA = function() {
        // SWFAddress variable is instantiated in SWFAddress javascript file
        // so I can use it here
        SWFAddress.addEventListener(SWFAddressEvent.CHANGE, someFunc);
    }

    // SWFAddress suppose to call this function
    this.handleChange= function(evt) {
    // Some code here
    }

}

// Instantiate the SomeClass
var someVar = new SomeClass();

function someFunc(evt) {
    someVar.handleChange(evt);
}

someVar.initializeSWFA();

I don't like this because this involves defining one extra function, so it takes extra space if anybody figures out how to add a method to SWFAddress EventListener from a JavaScript object. Please help me out.

Since your question in the comments to the now deleted answer also got deleted, I extended my old answer with a reply. Hope it makes sense. — Jakob
– Jakob, Commented Jan 3, 2011 at 17:34

Peter Mortensen · Accepted Answer · 2020-09-29 20:03:37Z

13

Your class structure is perfectly valid. However, if your handleChange() function uses the this keyword, expecting someVar, then that is where your problem lies.

This is what happens:

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, this.handleChange); correctly references the handler function within the class. SWFAddress caches that function to some variable f until the event is dispatched.
When the event is dispatched, SWFAddress calls f. While the reference to the function is preserved, the reference to the context, or this, is not. Therefore this defaults to window.

To get around this, you simply need to use an anonymous function that captures the variables within the class scope. You can call the handler with the correct context from within this anonymous function:

function SomeClass() {
    this.initializeSWFA = function() {
        // Save a reference to the object here
        var me = this;

        // Wrap handler in anonymous function
        SWFAddress.addEventListener(SWFAddressEvent.CHANGE, function (evt) {
            me.handleChange(evt);
        });
    }

    // SWFAddress suppose to call this function
    this.handleChange= function(evt) {
    // Some code here
    }

}

##An explanation of this, as requested by the OP:##

The this keyword can be explained in different ways: take a read of firstly this article about scope, and then this article about object-oriented JavaScript.

I'd like to throw in my quick reasoning too, which you may find helpful. Remember that JavaScript doesn't have "classes" as languages such as Java do. In those languages, a "method" of a class belongs only to that class (or could be inherited). In JavaScript however, there are only objects, and object properties, which can happen to functions. These functions are free agents -- they don't belong to one object or another, just like strings or numbers. For example:

var a = {
    myMethod: function () {...}
};

var b = {};
b.myMethod = a.myMethod;

In this case, which object does myMethod belong to? There is no answer; it could be either a or b. Therefore a.myMethod is simply a reference to a function, disassociated from the "context", or parent object. Therefore this has no meaning unless it is called explicitly using a.myMethod() or b.myMethod(), and thus defaults to window when called in any other way. It is for the same reason that there is no such thing as a parent or super keyword in JavaScript.

edited Sep 29, 2020 at 20:03

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 4, 2011 at 7:39

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

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

3 Comments

miki725 Over a year ago

Do you know of any article which describes this in detail why this would default to window. I thought that this.handleChange when stored to var f will be evaluated to a memory location or however Javascript refers to variables, and then when SWFAddress will call f, it will call the memory address of this.handleChange.

miki725 Over a year ago

Thank you. Your updated answer and the articles were very helpful.

Wim Haanstra Over a year ago

Thanks for your clear answer. I was encountering this problem too.

Peter Mortensen · Accepted Answer · 2020-09-29 20:05:08Z

2

I'm afraid I can't pinpoint your problem, but I would say that it has something to do with your use of SWFAddress. The way you're structuring SomeClass and its methods is completely valid, contrary to what some other answers here are stating.

Further clarification to miki's (now deleted) question from another answer, regarding how this works:

There are two cases for how this behaves; regular functions and functions invoked with the new-operator.

For regular function invokations, this refers to the object to the left of the dot (loosely speaking): For example, when writing someVar.initializeSWFA(), this will refer to someVar. When calling a function without the dot, this will refer to the global object. A function can be assigned from one object to another and hence this will be shifted, like this:

var someVar = new SomeClass();
var anotherVar = {};
anotherVar.aNewNameForTheSameFunction = someVar.initializeSWFA;
anotherVar.aNewNameForTheSameFunction(); // Inside of this call to initializeSWFA, "this" will be "anotherVar"

Then we also have the case when invoked with the new-operator. In that case, new will create a new object for you and this will refer to that object.

There are also ways to invoke a function with an explicitly set this, by using the call-function:

var someVar = new SomeClass();
var aNumber = 5;
someVar.initializeSWFA.call(aNumber, arg1, arg2, ..., argN);

That will call the function initializeSWFA with aNumber as this and also pass it the parameters arg1, arg2, etc. Note that someVar is taken out of the equation in that case.

edited Sep 29, 2020 at 20:05

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 3, 2011 at 17:20

Jakob

24.5k9 gold badges48 silver badges59 bronze badges

2 Comments

miki725 Over a year ago

Sorry, I am not an expert in Javascript. So you can add call() to any function?

Jakob Over a year ago

No need to apologize, that's what this site is for :) And yes, you can add call to any function. A function in javascript is an object, just like numbers and string and so on. And just like strings have functions like indexOf, concat and replace, functions have functions too :)

Peter Mortensen · Accepted Answer · 2020-09-29 20:07:07Z

2

I think the best thing to do is to stop thinking of SomeClass as a class.

JavaScript doesn't have classes. It uses prototypical inheritance. Which I won't go too deeply into here. Essentially, it means you just have objects. And if you want to create another object like the first one, you use the Object.prototype attribute to do that.

So if you want to do what you're trying to (assuming that SWFAddress works like most JavaScript), do the following.

var someVar = {  // (Using object notation)
    initializeSWFA : function(){
        SWFAddress.addEventListener(SWFAddressEvent.CHANG, this.handleChange);
    },
    handleChange : function(){
        // Your code here
    }
}

At this point you can call someVar directly:

someVar.initializeSWFA();

If instead you want to create an object that you can inherit other objects from try the following.

var baseObject = function(){};
baseObject.prototype.handleChange = function(){
    // Your code here
}
baseObject.prototype.initializeSWFA = function(){
    SWFAddress.addEventListener(SWFAddressEvent.CHANGE, this.handleChange);
}

var someVar = new baseObject();
someVar.initializeSWFA();

The new operator simply creates a new object that inherits the .prototype of the object specified.

edited Sep 29, 2020 at 20:07

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 3, 2011 at 17:57

ehudokai

1,92612 silver badges9 bronze badges

2 Comments

miki725 Over a year ago

How to reference the baseObject in code of the prototype method?

ehudokai Over a year ago

You can just call baseObject.handleChange or baseObject.initializesSWFA directly. Maybe I'm misunderstanding your question?

Collectives™ on Stack Overflow

How to reference a function from JavaScript class method

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related