Why does this refer to window or object based on where parenthesis are placed? And return undefined

Question

I am working on flexible javascript widget. In the course of some testing, I noticed that the context of this changes based on whether the parenthesis used to call a function are placed inside an object or in the global context of its call. Why do the parenthesis matter? And why would parenthesis inside the object refer to window and when placed in global context refer to the object. It seems like it would be the other way around.

Also undefined is returned in both instances. Is there a way to execute the function without returning anything?

I feel like I'm missing something important about this and don't want to miss out.

//this refers to window

var dataSource = {
    read: read()  
};

function read(){
  console.log(this);   
}

dataSource.read;

//this refers to dataSource object

var dataSource = {
    read: read  
};

function read(){
  console.log(this);   
}

dataSource.read();

Answer 1

Your code is doing two different things.

The first example is executing read() as the object definition is executed (read() is available because it's a function declaration and is hoisted, though this isn't related to the problem you're experiencing). It is called without any context so its this is window (as per the specification, where window is the browser's global object).

The second example has a reference to read(), which is then executed at the end of the block. Because it's executed as a property of dataSource, its this will become that. However, if you first assigned that reference to somewhere else and then invoked it via that reference, you'd again lose that this context.

For fine-grained control of this, take a look at bind(), call() and apply().

Also undefined is returned in both instances. Is there a way to execute the function without returning anything?

A function always has a return value (undefined if not explicitly set), but you're free to ignore it.

Answer 2

The scoping of this can be a tricky topic in javascript. That said, I can expand my answer on the general rules regarding the scope of this if need be.

But to answer your specific question, whenever you reference this inside an object literal, it by default, refers to the object literal itself.

Edit: as long as the function was invoked as a property of the object literal.

Where as, almost in any other situation I can call to mind, this will refer to the window object unless specified when invoking said function using apply() or call().

Answer 3

When this is used outside of objects it refers to the global object which in browser environment is window. Otherwise it refers to the last bareword before the last dot in the invocation.

For example:

function foo () {return this};
var bin = {bar:{foo:foo},foo:foo};

foo();         // returns window
bin.foo();     // returns bin
bin.bar.foo(); // returns bar
//   ^
//   |
//   '------ last bareword before the last dot in the invocation

Now, as to why the location of the parenthesis matter. I think you should be able to guess by now:

When we add a parenthesis to a word (variable/name/reference) what we're doing is make a function call:

foo(); // call foo

If we don't add the parenthesis, what we're doing is refer to the object:

foo; // this contains the function foo

Note that not adding the parens is not calling the function. Therefore it should be obvious that when you do:

var bar = { foofoo : foo() }

What you're doing is passing the result of the function foo to bar.foofoo. The function is invoked without any "dots" in its invocation path. Therefore it doesn't belong to any object and therefore the rule of this == window applies.

On the other hand if you do:

var bar = { foo : foo }

What you're doing is assign the function foo to bar.foo. When you later call it as:

bar.foo()

the invocation contains a "dot" therefore the rule about the last object before the last dot applies.

---

See my previous answer to a related question for a detailed explanation on how this works in javascript: How does the "this" keyword in Javascript act within an object literal?