Yet another try to make you understand better JavaScript's -this- keyword

1. this
is simple
Nir Elbaz, 2013
1

2. this is a JavaScript language immutable variable
Nir Elbaz, 2013
2

3. Usually, this refers to the object which owns
the method it was called from
Nir Elbaz, 2013
3

4. this === window (global context)
// no current object - window object owns it all:
var strText = "Hello, world";
alert(strText);
alert(window.strText);
alert(this.strText);
// -> "Hello, world"
// -> again, "Hello, world"
// -> and again, "Hello, world"
Nir Elbaz, 2013
4

5. this === window (global context)
// callingThis method is owned by window object:
var strText = "Hello, world";
function callingThis () {
alert(strText);
alert(window.strText);
alert(this.strText);
}
// -> "Hello, world"
// -> again, "Hello, world"
// -> and again, "Hello, world"
callingThis();
Nir Elbaz, 2013
5

6. this === undefined
// adding “use strict” to a function will cause this to be undefined:
var strText = "Hello, world";
function callingThis () {
"use strict";
alert(strText);
alert(window.strText);
alert(this.strText);
}
// -> "Hello, world"
// -> again, "Hello, world"
// -> nothing is shown since this === undefined
callingThis();
Nir Elbaz, 2013
6

7. this === Object
// callingThis, callingThat & callingThatAgain methods are now owned by
// MainObject object:
this.strText = "Hello, world";
function MainObject () {
this.strText = "I belong to MainObject";
this.callingThis = function () {
alert(this.strText);
}
}
MainObject.prototype.callingThat = function () {
alert(this.strText);
}
function alertText () {
alert(this.strText);
}
var obj = new MainObject();
obj.callingThis();
// -> "I belong to mainObject"
obj.callingThat();
// -> again, "I belong to mainObject"
obj.callingThatAgain = alertText;
obj.callingThatAgain();
// -> and Nir Elbaz, 2013 belong to mainObject"
again, "I
alert(this.strText);
// -> "Hello, world"
alertText();
// -> again, "Hello, world"
7

8. this === Object
// using bind, apply & call to define this:
var strText = "Hello, world";
function callingThis () {
alert(this.strText);
}
function MyObject () {
this.strText = "I belong to MainObject";
}
CallingThis();
var myObject = new MyObject();
callingThis.apply(myObject);
callingThis.call(myObject);
callingThis.bind(myObject);
// -> "Hello, world"
// -> "I belong to mainObject"
// -> again, "I belong to mainObject"
// -> and again, "I belong to mainObject"
Nir Elbaz, 2013
8

9. this === Object... and window!
// in ECMA 3, -this- refers to the head object in nested functions:
var MyObject = {
func1: function () {
console.log(this); // logs MyObject
var func2 = function () {
console.log(this); // logs window, and will do so from this point on
var func3 = function () {
console.log(this); // logs window, as it’s the head object
}();
}();
}
};
MyObject.func1();
Nir Elbaz, 2013
9

10. this === Object
// ECMA 5 fixed this behavior, or - you can fix it by sending -this- as a param
var MyObject = {
func1: function () {
console.log(this);
// logs MyObject
var func2 = function (self) {
console.log(self);
// logs MyObject
var func3 = function (self) {
console.log(self); // logs MyObject
}(self);
}(this);
}
};
MyObject.func1();
Nir Elbaz, 2013
10

11. this === DOM Element
// when a function is used as an event handler, its -this- is set to the element
// the event fired from, also in an inline event handler
var paragraphs = document.getElementsByTagName('p');
for (var i = 0, j = paragraphs.length; i < j; i++) {
paragraphs[i].addEventListener('click', function () {
console.log(this); // logs the element the event fired from
}, false)
}
<button onclick="console.log(this);">Log this</button>
Nir Elbaz, 2013
11

12. Summary
When not using call / apply or bind, the this value
will always refer to the global context, except in the
following instances:
✔
✔
The function was called with the new operator, in which
case this points to a new object
The function is a member of an object, in which case
this points to the object UNLESS function is being
called asynchronously.
- Yehuda Katz
Nir Elbaz, 2013
12

13. Resources
●
Fully Understanding the this Keyword
●
What is ‘this’ in JavaScript?
●
this
●
Understanding “Prototypes” in JavaScript
http://nirelbaz.tumblr.com
Nir Elbaz, 2013
13