Function defined with 'this', but executing without 'this'

Question

I was expecting the 2nd call of the "taco" function to generate a runtime error since I am not calling it with the "this" keyword:

function foo() {
    var bar = "baz";

    this.taco = function() {
        console.log(bar);
    };
    this.taco();
    taco(); // I expected a runtime error here.     
}

foo();

However, it does not.

Here is a fiddle of the same code: http://jsfiddle.net/phillipkregg/gdFxU/226/

Is JavaScript using some type of implicit context management here?

Just curious, thanks!

Answer 1

The reason is that when you call foo(), you are invoking it in the scope of the window object. That means that inside of foo(), the value of this is set to window.

Thus, this.taco() is actually window.taco() which is the same as taco(). In other words, taco() is a global function so it works either way you call it as taco(), as window.taco() or as this.taco() when this is window.

If you involve taco() as a new object like this where this is set to a new instance of foo and is not equal to window, then you get the expected run-time error:

function foo() {
    var bar = "baz";

    this.taco = function() {
        console.log(this);
        console.log(bar);
    };
    this.taco();
    taco(); // I expected a runtime error here.     
}

var x = new foo();

Example: http://jsfiddle.net/jfriend00/3LkxU/

---

If you are confused about the value of this, there are these javascript rules that determine the value of this:

1. If you call a function with new like x = new foo(), then a new instance of foo is created and the value of this is set to that object inside the foo() function and that new instance is returned from foo() by default.

2. If you call any function normally like foo(), then the value of this is set to be the global object which in a browser is window or if in javascript's newer "strict" mode, then this will be undefined. This is what was happening in your original example.

3. If you call a method with an object reference like obj.foo(), then this will be set to be the obj object.

4. If you make a function call with .apply() or .call(), then you can specifically control what the value of this is set to with the first argument to .apply() or .call(). For example: foo.call(obj) would call the foo() function and set the this pointer to the obj object.

5. If you are not in any function call (e.g. at the global scope), then this will be either the Global object (window in a browser) or undefined in strict mode.

6. As in all of the above rules, this is controlled by how the caller calls you, not how the function/method is defined.

Answer 2

The reason is this in foo(), when it's called just as is, will reference a global object. This means taco function will be introduced in the global scope.

To get the functionality you want use new foo() syntax instead. Then this will refer to a new object, which taco property will be assigned a new value (function). Calling taco directly will get you an error then.