Javascript  — this keyword

Context is one of those topics that always creates a lot of confusion when someone is starting to learn javascript and it’s a topic that the interviewer asks about a lot.

What is context?

Context is always the value of the this keyword which is a reference to the object that “owns” the currently executing code or the function where it’s looked at.

We know that windowis a global object in the browser so if we type thisin the console and it should return window object, which it does.

In node.js CLI if you try doing the above you will get an object that will have all globally used function like console , process etc. (try once).

Note: The value of this keyword depends on the object the function is run/called /sit on. Therefore thiskeyword has different values depending on where it is used.

Note: From now, this and context is used interchangeably.

Context — globally and inside a function.

this at the global level called on the global object

foo is the function is defined at the global level and is called on global level object i.e windowso calling fooand window.foois same. Hence the context is a window object.

this inside function called on function object at global level

Whereas if we do new foo() at the global level then will get this as fooobject.

Note: new operator creates an instance of an object. Context of the function will be set to the created instance of an object.

Context — under 2nd level function

Context — when the function is defined globally and used under an object (Implicit Binding).

Note: From above, we get that value of this keyword depends on the function is called upon not where the function is defined.

How context behave in ‘use strict`?

When using use strict in a function, the context i.e this keyword behaves differently. Context remains whatever it was called upon.

Note: Our entire program should probably either be strict or non-strict. However, sometimes you include a third-party library that has different Strict’ness than your own code, so care must be taken over these subtle compatibility details.

How context behave in arrow function?

Arrow functions work differently from regular functions in terms of context. thiswill always refer to the lexical scope, i.e thisretains the value of the enclosing lexical context's.

In global code, it will be set to the global object, hence we get above true.

How does context behave on the object’s prototype chain?

Context follows the same rule, i.e. if the function is on an object’s prototype chain, this refers to the object the method was called on.

If we call obj.func() will get undefined and if func is called on newObj created from objwhich has xdefined it will return the value hence 10.

How context behave in the event handlers?

The context in case event handlers refers to the element that received the event.

Here we added a jquery click event on body tag of DOM, and we can see that the context returns the body element.

How does the context behave in an execution context?

If you don’t know what is execution context. In short, execution context is the ‘environment’ or scope in which a function executes in. Every time a function is called, a new execution context is created. Every call to an execution context has 2 stages

1. Creation — when the function is called

2. Activation — when the function is executed

The value of thisis determined at creation phase, not at the time of execution. However, thisdetermination rule remains the same.

How is context is different from the scope?

Scope and context are altogether a different concept but usually used by the upcoming developer interchangeably.

The scope is the accessibility of variables, functions, or objects in some particular part of your code during runtime.

Every function invocation has both a scope and a context associated with it.

How to explicitly change the context?

We can dynamically change the context of any method by using either call() ,apply()and bind()method.

Call — The very first argument call takes in is the context you want to use. Afterward, you can pass in any number of comma-separated values.

foo.call(context, param1, param2, param3 );

Apply — This is the same as callbut differs in the sense of no. of argument. Apply only support 2 arguments, context and array of values.

foo.apply( context,[param1, param2, param3]);

Bind — It returns a new function which is permanently bound to the first argument of bind regardless of how the function is being used. binddoesn’t invoke the bound function immediately, rather it returns a new function we can run later.

Why do we need to explicitly change the context?

1. When we need to call a function defined inside an object say xbut on other objects say ywe can use explicit methods to do so, to increase reusability.

2. Currying and partial application is another part where explicitly change in context is used.

3. To make utility functions like

4. Inheritance is another place where the explicit change of context can be used.

Comment below if you know more reason :)

What are the cases where we need to take care of context?

We may lose the context i.e getting an undefined value for thisin

1. Nested Functions

We need to keep the context of the obj object referenced for when the callback function is called, in the above, that does not happen and we get the error.

We can get rid of the above error by replacing the exec code with below

// use of bind
exec: function () {
    this.f2(function () {
        this.f1();
    }.bind(this));
}// use of arrow function
exec: function () {
    this.f2(() => {
        this.f1();
    });
}// another way not recommended though
exec: function () {
   var that = this;
    this.f2(() => {
        that.f1();
    });
}

2. Method as callback

let obj = {
  name: "test",
  waveHi() {
    return ('Hi',this.name);
  }
};setTimeout(obj.waveHi, 1000)

The above will return Hi undefined, think for a second why? This is because the last line will be turn out to be

let f = obj.waveHi;
setTimeout(f, 1000);

and, setTimeout got the function obj.waveHi, separately from the object obj

Solutions are

// Wrapping function
setTimeout(function() {
  obj.waveHi(); // Hi Test
}, 1000);// Arrow function
setTimeout(() => obj.waveHi(), 1000); // Hi Test// use of bind
let waveHi = obj.waveHi.bind(obj);
waveHi() // Hi Test

Note:

1. Creating a “bound method reference” requires an anonymous wrapper function, and a calling cost. In specific situations, leveraging closures may be a better alternative.

2. Any sort of function reference (assigning as a value, passing as an argument) loses the function’s original binding.