Nir Elbaz, 2013 1

thisis simple

Nir Elbaz, 2013 2

this is a JavaScript language immutable variable

Nir Elbaz, 2013 3

Usually, this refers to the object which ownsthe method it was called from

Nir Elbaz, 2013 4

// no current object - window object owns it all:

var strText = "Hello, world";

alert(strText); // -> "Hello, world"alert(window.strText); // -> again, "Hello, world"alert(this.strText); // -> and again, "Hello, world"

this === window (global context)

Nir Elbaz, 2013 5

// callingThis method is owned by window object:

var strText = "Hello, world";

function callingThis () {alert(strText); // -> "Hello, world"alert(window.strText); // -> again, "Hello, world"alert(this.strText); // -> and again, "Hello, world"

}

callingThis();

this === window (global context)

Nir Elbaz, 2013 6

// adding “use strict” to a function will cause this to be undefined:

var strText = "Hello, world";

function callingThis () {"use strict";alert(strText); // -> "Hello, world"alert(window.strText); // -> again, "Hello, world"alert(this.strText); // -> nothing is shown since this === undefined

}

callingThis();

this === undefined

Nir Elbaz, 2013 7

// 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 again, "I belong to mainObject"alert(this.strText); // -> "Hello, world"alertText(); // -> again, "Hello, world"

this === Object

Nir Elbaz, 2013 8

// 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(); // -> "Hello, world"var myObject = new MyObject();callingThis.apply(myObject); // -> "I belong to mainObject"callingThis.call(myObject); // -> again, "I belong to mainObject"callingThis.bind(myObject); // -> and again, "I belong to mainObject"

this === Object

Nir Elbaz, 2013 9

// in ECMA 3, -this- refers to the head object in nested functions:

var MyObject = {func1: function () {

console.log(this); // logs MyObjectvar func2 = function () {

console.log(this); // logs window, and will do so from this point onvar func3 = function () {

console.log(this); // logs window, as it’s the head object}();

}();}

}; MyObject.func1();

this === Object... and window!

Nir Elbaz, 2013 10

// ECMA 5 fixed this behavior, or - you can fix it by sending -this- as a param

var MyObject = {func1: function () {

console.log(this); // logs MyObjectvar func2 = function (self) {

console.log(self); // logs MyObjectvar func3 = function (self) {

console.log(self); // logs MyObject}(self);

}(this);}

}; MyObject.func1();

this === Object

Nir Elbaz, 2013 11

// 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>

this === DOM Element

Nir Elbaz, 2013 12

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.

Summary

- Yehuda Katz

Nir Elbaz, 2013 13

Resources

● Fully Understanding the this Keyword● What is ‘this’ in JavaScript?● this● Understanding “Prototypes” in JavaScript

http://nirelbaz.tumblr.com