Javascript this keyword

Javascript
‘this’ keyword
Pham Tung - Aug 2015

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.

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

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

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

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

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

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

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

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

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()

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);

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();

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

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

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/

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/

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

Javascript this keyword

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Javascript this keyword (20)

Recently uploaded (20)

Javascript this keyword