Execution Context Best Practices in JavaScript

In this article we'll see what this means, and places where this is applicable. 

We'll also look at how to manipulate this with built-in functions like 

apply, call and bind.

Every JavaScript statement is executed in one execution context or the other. In it's simplest terms this refers to the "owner"  of  the function we currently executing. this helps us to get the object or the execution context we are currently working with.

	function func1() {
	return this;
	}
	console.log(func1()); //returns Window object
	function func2(){
	"use strict";
	return this;
	}
	console.log(func2()); //undefined

view raw this1.js hosted with ❤ by GitHub

In the above example both func1 and func2 returns this. because f1 was called (executed) inside the window (or global context) func1 returns window. In f2 we are using strict mode. In strict mode, this will be whatever it's set to when entering the execution context. Since we have not defined this, it will remain undefined. We can set that to any value we want. Even null. 

	var val = "window.val"
	var obj = {
	val: "obj.val",
	innerMethod: function () {
	var val = "obj.val.inner",
	func = function () {
	var self = this;
	return self.val;
	};
	return func;
	},
	outerMethod: function () {
	return this.val;
	}
	};
	//This actually gets executed inside window object
	console.log(obj.innerMethod()()); //returns window.val
	//Breakdown in to 2 lines explains this in detail
	var _inn = obj.innerMethod();
	console.log(_inn()); //returns window.val
	console.log(obj.outerMethod()); //returns obj.val

view raw this2.js hosted with ❤ by GitHub

In the above example we are creating 3 variables with the same name 'val'. One in the global context, one inside obj and the other inside the innerMethod of obj. JavaScript resolves identifiers within a particular context by going up the scope chain from local to global.

Below we'll look at 4 scenarios this applies

Calling a method of a object

	var status = 1;
	var helper = {
	status : 2,
	getStatus: function () {
	return this.status;
	}
	};
	var theStatus1 = helper.getStatus(); //line1
	console.log(theStatus1); //2
	var theStatus2 = helper.getStatus;
	console.log(theStatus2()); //1

view raw gistfile1.js hosted with ❤ by GitHub

When line1 is executed, JavaScript establishes an execution context (EC) for the function call, setting this to the object referenced by whatever came before the last ".". so in the last line you can understand that a() was executed in the global context which is the window.

Constructor

When defining a function to be used as a constructor with the new keyword, this can be used to refer to the object being created. 

	function Person(name){
	this.personName = name;
	this.sayHello = function(){
	return "Hello " + this.personName;
	}
	}
	var person1 = new Person('Scott');
	console.log(person1.sayHello()); //Hello Scott
	var person2 = new Person('Hugh');
	var sayHelloP2 = person2.sayHello;
	console.log(sayHelloP2()); //Hello undefined

view raw this-constructor.js hosted with ❤ by GitHub

when new Person() is executed, a completely new object is created. Person is called and its this is set to reference that new object. The function can set properties and methods on this. which returned at the end of Person's execution. We entered Person via new so this meant "the new object".

Function call

	function testFunc() {
	this.name = "Name";
	this.myCustomAttribute = "Custom Attribute";
	return this;
	}
	var whatIsThis = testFunc();
	console.log(whatIsThis); //window
	var whatIsThis2 = new testFunc();
	console.log(whatIsThis2); //testFunc() / object
	console.log(window.myCustomAttribute); //Custom Attribute

view raw this-functioncall.js hosted with ❤ by GitHub

If we don't provide a context by new (as explained above), whatIsThis defaults to reference the most global context it can find (window) and it will pollute the global object too. But whatIsThis2 acts as we expect since we are providing new there. Therefore make sure to put new keyword otherwise you'll be adding unnecessary variables to global context.

Event Handler

If the event handler is inline, this refers to global window object. 

	<script type="application/javascript">
	function click_handler() {
	alert(this); // alerts the window object
	}
	</script>
	<button id='thebutton' onclick='click_handler()'>Click me!</button>

view raw this-eventhandler1.html hosted with ❤ by GitHub

When we add event handler via. JavaScript, this refers to the DOM element that generated the event. 

	<script type="text/javascript">
	function click_handler() {
	alert(this); // alerts the button DOM node
	}
	function addhandler() {
	document.getElementById('thebutton').onclick = click_handler;
	}
	window.onload = addhandler;
	</script>
	<button id='thebutton'>Click me!</button>

view raw this-eventhandler2.html hosted with ❤ by GitHub

Let's look at more complicated example

Here when you click thebutton it alerts undefined.

	<script type="text/javascript">
	function Person(name) {
	this.personName = name;
	this.sayHello = function () {
	alert("Hello " + this.personName);
	}
	}
	function addhandler() {
	var p1 = new Person('John'),
	the_button = document.getElementById('thebutton');
	the_button.onclick = p1.sayHello;
	}
	window.onload = addhandler;
	</script>
	<button id='thebutton'>Click me!</button>

view raw this.html hosted with ❤ by GitHub

Problem: We've passed a reference to the sayHello method, which when executed as an event handler, runs in a different context than when it's executed as an object method. Here this refers to the DOM element. setTimeout exhibits the same behavior, delaying the execution of a function while at the same time moving it out into a global context. 

Manipulating context with .apply and .call

	var obj1 = {
	num : 4
	}
	function multiply(val){
	return this.num * val;
	}
	console.log(multiply(3)); //impossible because no num defined in window (NaN)
	console.log(multiply.apply(obj1, [4])); //16
	console.log(multiply.call(obj1, 4)); //16

view raw context_man.js hosted with ❤ by GitHub

The call method (also the apply method) allows us to specify the this object in which the function needs to get executed. 

<button id='thebutton'>Click me!</button>

view raw context_man2.html hosted with ❤ by GitHub

	function Person(name) {
	this.name = name;
	this.sayHello = function () {
	alert('Hello ' + this.name);
	}
	}
	function addhandler() {
	var p1 = new Person('Jason'),
	the_button = document.getElementById('thebutton');
	the_button.onclick = p1.sayHello.call(p1);
	}
	window.onload = addhandler;

view raw context_man2.js hosted with ❤ by GitHub

Even though we apply .call there's a problem. call executes this immediately. Instead of providing a function reference to click handler, we are giving the result of an executed function. 

Let's get introduced to .bind(). bind performs the same general task as call. altering the context in which a function executes. The difference is bind returns a function reference which can be used later rather than the result from immediate execution which call does. Let's see a basic example.

	this.statusId = 1;
	var module = {
	statusId : 4,
	getStatus : function(){
	return this.statusId;
	}
	};
	console.log(module.getStatus()); //4
	var getModuleStatus = module.getStatus;
	console.log(getModuleStatus()); //this refers to global //1
	var boundGetStatus = getModuleStatus.bind(module);
	console.log(boundGetStatus()); //4

view raw bind_js1.js hosted with ❤ by GitHub

Now we'll create bind method on the Function object's prototype, which makes bind available for all functions in our program. (More info)

	var first_object = {
	num: 4
	};
	function multi(mul) {
	return this.num * mul;
	}
	Function.prototype.bind = function (obj) {
	var method = this,
	temp = function () {
	return method.apply(obj, arguments);
	};
	return temp;
	}
	var first_mul = multi.bind(first_object);
	console.log(first_mul(5)); //20

view raw bind_js2.js hosted with ❤ by GitHub

When multiply.bind(obj) is called, JavaScript creates an execution context for bind method, setting this to multiply function, and setting the 1st argument obj to refer first_object.

example 2

	var first_object = {
	a: 2,
	b: 4
	};
	function adder(val1, val2) {
	return this.a + this.b + val1 + val2;
	}
	Function.prototype.bind = function (obj) {
	var method = this,
	temp = function () {
	return method.apply(obj, arguments);
	};
	return temp;
	}
	var first = adder.bind(first_object);
	console.log(first(5, 6));

view raw bind_js3.js hosted with ❤ by GitHub

The beauty of this solution is creation of method and setting it to this. 

When the anonymous function is created on next line, method is accessible via its scope chain, as is obj (this couldn't be used here, because when newly created func. is executed, this will be overwritten by a new, local context) This alias to this makes it possible to use apply to execute the mulitply function, passing in obj to ensure that the context is set correctly. temp is a closure that when returned at the end of bind call, can be used in any context what so ever. 

Other : Chaining .bind()

JQuery Proxy
JQuery Proxy is another way you can use to make sure this in a function will be the value you desire. It takes a function as the input and returns a new one that will always have a particular context. Read following articles Understanding jQuery proxy and usage of jQuery proxy for more information.

resource1,  
http://stackoverflow.com/questions/9001830/the-reason-to-use-js-call-method

http://www.digital-web.com/articles/scope_in_javascript

jquery proxy