The 'this' keyword in JavaScript refers to the owner of the function that is being executed. The value of 'this' is determined by how the function is called. In a global context, 'this' refers to the global object (window). In a constructor function called with 'new', 'this' refers to the newly created object. In event handlers, 'this' refers to the element that received the event. The value of 'this' can be explicitly set by using call, apply, or bind.

1. Javascript
‘this’ keyword
Pham Tung - Aug 2015

2. What is this?

3. Definition
this is a special identifier keyword - pointing to
the “owner” of the function being executed.
The value of this is based on the context in
which the function is called at runtime.

4. Global Context
console.log(this === window); // true

5. Function Context
function f1(){
return this;
}
f1() === window; // global object

6. Constructor
function Foo(){
this.value = 1;
console.log(this);
}
var obj = new Foo();
console.log(obj.value); // logs 1

7. ‘this’ in Nested Function
var obj = {};
obj.func1 = function() {
console.log(1, this);
function func2() {
console.log(2, this);
}
func2();
}
obj.func1();
Object {}
Window

8. In–line event handler
<element onclick="doStuff()">
window
HTML Element
doStuff()

9. DOM event handler
element.onclick = doStuff;
window
doStuff()
HTML Element

10. Strict Mode
"use strict";
function test(){
alert(this);
}
test();
window.test();
undefined
[object Window]
(function(){
alert(this);
})();

11. eval() vs setTimeout()/setInterval()
var obj = {};
obj.testEval = function () {
eval("alert(this)");
};
obj.testSetTimeout = function () {
setTimeout("alert(this)", 100);
};
obj.testEval(); // obj
obj.testSetTimeout(); // window
the setTimeout function
is a method of the
window object.
Any code inside the
anonymous function that
is passed into the
setTimeout call has
window as it’s context

12. 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 new Foo = new Foo();
the new instance
(e.g. newFoo)
Evaluation n/a value of this in parent contexteval()

13. Controlling the Value of
this

14. Changing ‘this’ context
var obj = {value: 100};
function add(num1, num2){
alert(this.value + num1 + num2);
}
add.call(obj, 200, 300);
add.apply(obj, [200, 300]);
var objAdd= add.bind(obj);
objAdd(200, 300);

15. that = this
var boy = {
name: "Bill",
girlFriends: ["Emma", "Mia", "Ava"],
showGirlFriends: function () {
var that = this;
this.girlFriends.forEach (function (item) {
console.log (that.name + " has a girlfriend called " +
item);
});
}
};
boy.showGirlFriends();

16. Quiz

17. Quiz 1
function alertThis(){ alert(this); }
(function(){
eval('alertThis()');
})();

18. Quiz 2
var obj = {};
obj.test = function () {
setTimeout(function () {
alert(this);
}, 100);
};
obj.test();

19. Quiz 3
<input type="button" id="button1" value="Button 1" onclick="test(this)" />
<input type="button" id="button2" value="Button 2" />
window.test = function(){
alert(this);
}
document.getElementById("button2").onclick = test;
http://jsfiddle.net/yinyang/fju34vkg/

20. Quiz 4
<input type="button" id="button" value="Click Me" />
function Foo() {
this.value = 100;
this.showValue = function () {
alert(this.value);
}
}
var foo = new Foo();
foo.showValue(); // (1)
document.getElementById("button").onclick = foo.showValue; // (2)
http://jsfiddle.net/yinyang/tLuseowc/

21. References
https://javascriptweblog.wordpress.com/2010/08/30/understanding-
javascripts-this/
http://code.tutsplus.com/tutorials/fully-understanding-the-codethiscode-
keyword--net-21117

22. The End!