I am pretty new to JavaScript, and I've just started working with .apply() and other methods that use the keyword this, and I can tell that this has something to do with the context in which the function is invoked, but I'd really like to understand what exactly this is referring to.
The relationship between a particular function invocation and this looks similar to the relationship between an object and a property/method.
Are these two relationships related in anyway?
According to the ECMAScript Language Specification Section 11.1.1 the answer is
The this keyword evaluates to the value of the ThisBinding of the current execution context.
Here are three cases, which you can consider. The are not described formally but instead simple and intuitive:
Default context
If you don't specify the context and invoke a function (not method), this will be the global object:
function foo() {
console.log(this); //window
}
Set context implicitly
If you invoke a function, which is method of given object this will be the object before the last dot:
function foo() {
console.log(this);
}
var bar = {};
bar.foo = foo;
bar.foo(); //bar
bar.baz = {};
bar.baz.foobar = foo;
bar.baz.foobar(); //bar.baz
Set context explicitly
You can change the context using call, apply, bind:
function foo() {
console.log(this);
}
foo.call(1); //1
foo.call(window); //window
var bar = {};
bar.foo = foo;
bar.foo.apply(42); //42
