THIS

A presentation about this

By Thomas A. Valletta

Execution Context	Syntax of Function Call	Value of `this`
Global	n/a	global object (e.g. `window`)
Function	Method call: `myObject.foo();`	`myObject`
Function	Baseless function call: `foo();`	global object (e.g. `window`) (undefined in strict mode)
Function	Using call: `foo.call(context, myArg);`	`context`
Function	Using apply: `foo.apply(context, [myArgs]);`	`context`
Function	Constructor with new: `var newFoo = new Foo();`	the new instance (e.g. `newFoo`)
Evaluation	n/a	value of `this` in parent context
*Taken from "Understanding JavaScript's this" Keybord by Angus Croll

<!doctype html>
<html>
<head>
<title>MyPage</title>
<script>
alert(this);
</script>
</head>
<body>
...
</body>
</html>

var myObject = {
foo: function() {
console.log(this);
}
}
myObject.foo();

var MyObject = function() {
var foo = function() {
console.log(this);
}
foo();
}
MyObject();

var MyObject = function() {
var foo = function() {
console.log(this);
}
foo();
}
new MyObject();

var MyObject = function() {
this.foo = function() {
console.log(this);
}
this.foo();
}
MyObject();

var MyObject = function() {
this.foo = function() {
console.log(this);
}
this.foo();
}
new MyObject();

var MyObject = function() {
this.foo = function() {
console.log(this);
}
this.foo();
}
var myMethod = function(callback) {
callback();
}
myMethod(new MyObject().foo);

function clickEvent(a, b, c) {
console.log(this);
}
clickEvent.call(domElement, 'a', 'b', 'c');

function clickEvent(a, b, c) {
console.log(this);
}
clickEvent.apply(el, ['a', 'b', 'c']);

function MyObject() {
eval("console.log(this);");
}
new MyObject();

THIS

A presentation about this

By Thomas A. Valletta

Thanks!

Thomas A. Valletta

@tvalletta