Javascript‘this’ keyword

Pham Tung - Aug 2015

What is this?

Definitionthis 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 Contextfunction f1(){ return this;}

f1() === window; // global object

Constructorfunction Foo(){

this.value = 1;console.log(this);

}

var obj = new Foo();console.log(obj.value); // logs 1

Same object

‘this’ in Nested Functionvar 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 ElementdoStuff()

this

DOM event handlerelement.onclick = doStuff;

window

doStuff()HTML Element this

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(); // objobj.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()

Controlling the Value of this

Changing ‘this’ contextvar 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 = thisvar 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

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

(function(){ eval('alertThis()');})();

Quiz 2var 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/

Referenceshttps://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/

http://code.tutsplus.com/tutorials/fully-understanding-the-codethiscode-keyword--net-21117

The End!