This keyword In Javascript 2019 - Javascript Context 

Context is one of those topics that always create a lot of confusion when starting learning javascript and a topic that interviewer ask a lot.

Let's start…

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 its 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.

foo 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.

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 behave differently. Context remains as 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 (read here about 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 follow 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 newObjcreated 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 return the body element.

How does the context behave in execution context?

If you don’t know what is execution context (read here). 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. Read here more about scopes.

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 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 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 increasereusability.

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.



If anything is not clear or you want to point out something, please comment down below.

Check out articles on Javascript, Angular, Node.js, Vue.js

Thanks and stay tuned :)

Email

About Deepak Gupta

Deepak is profound programmer and financial educator in India. He has co-founded couple of startup from scratch and worked in more than 12 startup and big corporate with different roles.

Owing to his interest, he has been writing blogs regarding JavaScript and other framework to help people starting with it. Also, love to educate people about trading and cryptoworld in his free time.

Subscribe to our email list

More Tags Of Your Interest