Javascript scope issue

Question

I thought I understood how javascript scope worked until now. This is what I have

function MFCommentsHandler(node, type, item) {
    this.get = function(returnType){
        ...
    }

    function getButton(){
        var button = document.createElement('button'),
            get = this.get;
        button.innerHTML = 'Load more comments';
        button.onclick = function(){
            console.log(get);
            get('html');
        }
        return button;
    }

}

I use inner functions to append the element generated by getButton to the document, but when I click it I get get is not a function. Why is get undefined inside of the onclick function?

because this is whatever context you're calling MFCommentsHandler in. Unless you're constructing a new object using new. — Stephen Thomas
– Stephen Thomas, Commented Jan 16, 2014 at 22:36
@StephenThomas– this has nothing to do with "context", it is set entirely by how a function is called or by bind. — RobG
– RobG, Commented Jan 16, 2014 at 22:40

elclanrs · Accepted Answer · 2014-01-16 22:35:35Z

2

this depends only on how you call a function. It can be implicit, but in your case, you lost the context. You need to cache this in the upper scope:

function MFCommentsHandler(node, type, item) {
    var self = this;
    this.get = function(returnType){
        ...
    }
    function getButton(){
        self.get(); // cached reference
        ...
    }
}

Or you can explicitly pass the context when you call getButton:

function MFCommentsHandler(node, type, item) {
    this.get = function(returnType){
        ...
    }
    function getButton(){
        this.get();
        ...
    }
    getButton.call(this); // explicit context
    ...

answered Jan 16, 2014 at 22:35

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

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

3 Comments

php_nub_qq Over a year ago

Ah.. Such a simple mistake.. Thank you sir.

RobG Over a year ago

"this depends only how you call a function". Exactly. "but in your case, you lost the context". Which conflicts with the first statement. What you mean is this isn't set to the required value in the call.

elclanrs Over a year ago

What I mean is that this isn't what it was before so "you lost context", but technically, yes, it's because this is not set in the call. But the call can be implicit, as in obj.method(), but you can call the function without dot notation, thus you "lose context". That's how I'd explain it.

Matt · Accepted Answer · 2014-01-16 22:36:09Z

2

The referant of this changes with context. Try this instead:

function MFCommentsHandler(node, type, item) {
    var get = function(returnType){
        ...
    }

    function getButton(){
        var button = document.createElement('button');
        button.innerHTML = 'Load more comments';
        button.onclick = function(){
            console.log(get);
            get('html');
        }
        return button;
    }

}

answered Jan 16, 2014 at 22:36

Matt

20.8k1 gold badge61 silver badges76 bronze badges

2 Comments

php_nub_qq Over a year ago

but then I won't be able to call get from the outside

Matt Over a year ago

@php_nub_qq That's true. In that case go with elclanrs's answer.

Akinkunle Allen · Accepted Answer · 2014-01-17 01:10:03Z

1

The getButton() function you defined inside the MFCommentsHandler() function you defined is a closure. Closures have access to the variables and arguments (but not the arguments object) of their outer function. They however, do not have access to the this value of their outer function. To have access to this value, just store a reference of it in a variable so it can be accessed from the inner function.

function MFCommentsHandler(node, type, item) {
    var that = this; //reference to the invocation context
    //that can be accessed anywhere within this function

    this.get = function(returnType){
        ...
    }

    function getButton(){
        ...
        that.get('html');
    }

}

answered Jan 17, 2014 at 1:10

Akinkunle Allen

1,30912 silver badges20 bronze badges

Collectives™ on Stack Overflow

Javascript scope issue

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related