Why is "this" needed to call functions inside an object

Question

var a = {
    text : 3,
    logText : function () {
        console.log(this.text);
    },
    callLogText : function() {
        logText();
    }
};
a.callLogText();

This will genernate a ReferenceError: logText is not defined error message.

Instead, you prefix this to the logText() method, it will be ok. No error msg will pop.

var a = {
    text : 3,
    logText : function () {
        console.log(this.text);
    },
    callLogText : function() {
        this.logText();
    }
};

I really cant figure out the reason.

I don't think you are showing us all the code. I don't see `barral` anywhere. — Raekye, Aug 02 '12 at 07:16
It is scope related. `this` refers to `var a`, if you do not use `this`, it will look for a global function called `logText`. — Gavin, Aug 02 '12 at 07:16

score 4 · Accepted Answer · answered Aug 02 '12 at 07:25

You need to learn the JavaScript scoping rules. This blog post gives a good introduction.

In a nutshell, JavaScript follows some rules when you use a variable name (for the purpose of this explanations, function definitions are pretty much like variable declarations).

What probably confuses you is this:

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

In both cases, you get a new variable a. In the first case, it's an object with a property b. In the second case, it's a function which has a nested scope in which a new variable b is defined.

JavaScript will look in the current and all parent scopes for variables. But object definitions are no scopes. As far as JavaScript is concerned, the property b is invisible unless you make it visible by using the special variable this which always references the "current" object (in your example, that is a).

Since the properties of the object a are not "in scope", JavaScript can't find logText() unless you tell it to look in this. If you don't say anything, JavaScript will look in the current scope (the body of the function callLogText), then the parent scope (in which a is defined) and then in any parent scopes of that.

Very good explanation. If someone needs to further understand Scope and Execution Context: http://stackoverflow.com/questions/11148353/javascript-scope-and-execution-context and http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/ — Alex Pakka, Aug 02 '12 at 07:47

score 0 · Answer 2 · answered Aug 02 '12 at 07:18

0

It's not a quirk. It's how most languages function when it comes to objects.

logText() is a method of the a object, not a function.

You need to call methods internally as this.methodName() or externally as object.methodName().

answered Aug 02 '12 at 07:18

Ben Rowe

28,406
6
55
75

score 0 · Answer 3 · answered Aug 02 '12 at 07:18

0

logText(); is to execute a global function logText which is undefined.

this.logText(); is to execute the function a.logText.

answered Aug 02 '12 at 07:18

xdazz

158,678
38
247
274

score 0 · Answer 4 · answered Aug 02 '12 at 07:24

Calling

logText();

means somewhere there is a function named logText(), but here you have defined logText() as a property of an object, so to access the logText() you have to refer it with the help of the object it is defined in. In this case it is in the same object so you refer to the same object by saying this.

Why is "this" needed to call functions inside an object

4 Answers4