This & Context

Question 1

In other languages like Java, ‘this’ is seen as an instance of the current object in the class method. How is ‘this’ different in JavaScript?

Answer 1

In JavaScript, ‘this’ is the current execution context of the function. To put it another way, it is a reference to the object that “owns” the currently executing code.

Question 2

How is the value of ‘this’ determined?

Answer 2

The value of ‘this’ is determined by the invocation pattern. For example: function invocation, method invocation, constructor invocation, or indirect invocation.

Question 3

The value of ‘this’ is determined by the invocation pattern. What are the four patterns of invocation?

Answer 3

* Function invocation
const sum = add(1, 2);

• Method invocation
  counter. increment();

* Constructor invocation
const g = new Graph();

* Indirect invocation
const sum = add.apply(null, [1, 2]);

Question 4

How is context different to scope?

Answer 4

Every function invocation has both a scope and a context associated with it. Fundamentally, scope is function-based while context is object-based. In other words, scope pertains to the variable access of a function. Context is the value of ‘this’ which is a reference to the object that “owns” the currently executing code.

Question 5

What is ‘this’ bound to for method invocation?

Answer 5

When a method is invoked, ‘this’ is bound to that object to which the method belongs.

const counter = {
 num: 0,
  increment() {
    console.log(this === counter); // true
    this.num += 1;
    return this.num;
  } 
};
counter.increment(); // 1
counter.increment(); // 2

Question 6

What is ‘this’ bound to for a method that’s been separated from its object (either as extracted into a variable or passed as a parameter)?

function Pet(type) {
  this.type = type;
  this.logInfo = function() {
    console.log(`Type: ${this.type}`);
  } 
}

const myCat = new Pet('Cat');
setTimeout(myCat.logInfo, 1000);

Answer 6

This is a potential pitfall. If a method is separate from its object then a function invocation will happen instead, and ‘this’ will be the global object (or undefined in strict mode).

The example code will log “Type: undefined”.

Question 7

What is ‘this’ bound to for a function invocation?

Answer 7

For function invocations, ‘this’ is bound to the global object. In a browser, the global object is the window object. In Node.js, the global scope is the current module.exports object.

function sum(a, b) {
  console.log(this === window); // true
  this.myNumber = 20;
  return a + b;
}
sum(1, 2);
window.myNumber; // 20

In strict mode, ‘this’ will be undefined for function invocation.

Question 8

What is ‘this’ bound to for a constructor invocation?

Answer 8

A constructor call creates an empty object which inherits properties from the constructor’s prototype. The value of ‘this’ in a constructor invocation is the newly created object.

Question 9

How do you make sure that a constructor function is called with new?

Answer 9

If a function is called with new then ‘this’ will be an instance of that type of object. If it’s not called with new then the ‘this’ will be the global object. To safeguard against this:

function Vehicle(type) {
  if (!(this instanceof Vehicle)) {
    throw new Error('Incorrect invocation');
  } 
}

Question 10

How do you provide an object to a function for the function to use as ‘this’?

Answer 10

Functions are first class objects so they have methods of their own. Two of their methods are call() and apply(), which will invoke the function with a configurable context. They also take a list of arguments.

const rabbit = { name: ‘Rabbit’ };

function concatName(msg) {
  return msg + this.name;
}

concatName.call(rabbit, ‘Hello ‘);
concatName.apply(rabbit, [‘Bye ‘]);

Question 11

What is a bound function?

Answer 11

A bound function is a function whose context and/or arguments are bound to specific values. You create a bound function using the bind() function.

this.x = 9;
const foo = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

foo.getX(); // 81

const retrieveX = foo.getX;
retrieveX(); // 9 because function invocation

const boundGetX = retrieveX.bind(foo);
boundGetX(); // 81

Question 12

What is ‘this’ bound to for a bound function?

Answer 12

The bound function has its ‘this’ set to the provided object.

Question 13

What is ‘this’ bound to for arrow functions?

Answer 13

The arrow function does not create its own execution context but takes ‘this’ from the outer function where it is defined. In other words, the arrow function binds ‘this’ lexically.

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  log() {
    console.log(this.x); // 95
    setTimeout( () => {
      console.log(this.x); // still 95
    }, 1000);
  }
}

const myPoint = new Point(95, 96);
myPoint.log();

Question 14

What happens if you define a method with an arrow function?

function Period(hours) {
  this.hours = hours;
}

Period.prototype.format = () => {
return this.hours;
}

const myPeriod = new Period(2);
myPeriod.format();

Answer 14

Arrow functions don’t have their own ‘this’. They take ‘this’ from the outer function where they were defined. Since the format method is defined as an arrow function at the topmost scope (global context), it has ‘this’ as the global object (window for browsers).

In this case it will return undefined.