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

javascript

Solution

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`:

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.

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.

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

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.

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.

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

Problem

Original source