'this' keyword means differently at two places?

Question

Following is my code -

(function($){
obj = {
    alertText: function(){
        console.log('Called');
    },
    testFunc: function(){
        console.log(this);
        this.alertText();
    },
    checkFunc: function(){
        inner();
        function inner(){
            console.log(this);
            this.alertText();
        }
    }
}})(jQuery)

When I call testFunc(), alertText() is properly called over the this keyword.

However the call to alertText() using this fails inside inner() (TypeError saying this.alertText is not a function) after I call the checkFunc() function.

When I console this as shown above, I get different contents inside it - the one inside testFunc() show the object obj, while the one inside inner() shows the Window object.

Why is this so? Why does this mean differently at two places?

[function scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope). Pass your "this" from outer function, to call alertText. — Anirudh Ramanathan, Jun 22 '13 at 21:02
@lonesomeday ok.. but why is that so? can you please explain? sorry i am not quite clear at this concept.. — anujit, Jun 22 '13 at 21:07
Possible duplicate: [In Javascript, why is the “this” operator inconsistent?](http://stackoverflow.com/q/80084/710446) — apsillers, Jun 22 '13 at 21:19
not a duplicate of that one, here the `this` making issues is from an inner function in an object. — zmo, Jun 22 '13 at 21:21
I think that that proposed duplicate will certainly clarify the OP's problem, but perhaps you're right that further explanation is required to correct the OP's misunderstanding of how `this` works in inner functions. — apsillers, Jun 22 '13 at 21:38

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

the this keyword in javascript is dependent on the calling context, and has a multiple semantic. That's one of the most complicated and bizarre feature of Javascript. You can read @DarkCthulhu's link.

In javascript there are three ways of defining the this object, as well explained in this answer:

someThing.someFunction(arg1, arg2, argN)
someFunction.call(someThing, arg1, arg2, argN)
someFunction.apply(someThing, [arg1, arg2, argN])

As you call the inner function without an object, this points to the global object. Whereas the this for checkFunc and testFunc is the current object that you assign to obj.

To solve your issue, in the outer function, create a var that = this and use that in the inner function. It's adviced by Crockford ;-)

edited May 23 '17 at 10:32

Community

1
1

answered Jun 22 '13 at 21:17

zmo

24,463
4
54
90

ok got it.. but can u explain what does 'defining' `this` object mean as you said in your answer? shouldn't `this` implicitly refer to something? – anujit Jun 22 '13 at 21:53
the `this` object is implicitly defined through the way you call the function, as I told you. Whether you call it unbounded, or bounded to the object. – zmo Jun 22 '13 at 22:01

'this' keyword means differently at two places?

1 Answers1