In JavaScript, functions have the ability to access call(), apply() and bind() methods. This article aims to simplify the understanding of these methods, and demonstrate how they can solve some critical programming challenges. We will also write our own code to better comprehend these concepts.

Before we dive into these methods, let’s take a moment to understand the this keyword in JavaScript.

this

The this keyword behaves uniquely in JavaScript compared to other programming languages.

In JavaScript, this refers to the object where the current code is being executed. The value of this is determined at runtime and may differ if we’re operating in strict mode. Let’s start by examining an example in the global context.

console.log(this);

Whether we’re using strict or non-strict mode, this corresponds to the same global object, the window object.

Consider the following code:

function myFunc() {
  console.log(this);
}

myFunc();

In non-strict mode, this continues to refer to the global window object.

However, in strict mode:

'use strict';

function myFunc() {
  console.log(this);
}

myFunc();

this will return undefined.

Let’s further explore with another example, this time involving an object method.

Imagine we’ve crafted a JavaScript course. We have an object containing the course details and an enrol function.

'use strict';

const javascript = {
  language: 'js',
  title: 'JavaScript Crash Course',
  students: [],
  enrol() {
    console.log(this);
  },
}

javascript.enrol();

As a quick side note, in ES5 we would write line 7 as:

enrol: function() { ... }

but in ES2015 (ES6), we can use the enhanced object literal syntax without the function keyword.

When we call the enrol method, we see the object with the language, title, students, and enrol function. In an object method, this points to the object itself, regardless of strict or non-strict mode.

Let’s proceed to enrol students.

'use strict';

const javascript = {
  language: 'js',
  title: 'JavaScript Crash Course',
  students: [],
  enrol(studentId, name) {
    this.students.push({
      course: this.language,
      id: studentId,
      name,
    });
  },
};

javascript.enrol(1, 'Ryan');
javascript.enrol(2, 'Flore');
javascript.enrol(3, 'James');
console.log(javascript);

We’re successfully able to enrol students:

Now, suppose we want to create another course for React and decide to reuse the enrol() function from the javascript object. We assign the enrol() function reference to a new variable, enrol.

Let’s examine the enrol,

const enrol = javascript.enrol;
console.log(enrol);

we will see that it correctly references the enrol() function.

Great, now let’s try:

enrol(1, 'Ryan');

then.. hmm… unexpectedly, we encounter an error. Why is that?

As the previous example showed, when we call a function in the global context in strict mode, the this keyword will return undefined. Because enrol is now a standalone function call and not a method of the javascript course object, this also returns undefined.

A general rule of thumb for finding the value of `this`

A simple rule for determining the value of this is to examine where the function is invoked, not where it’s defined.

With javascript.enrol(1, 'Ryan');, to identify the value of this, we look at the reference to the left of the dot, javascript in this case. So, this inside the enrol() function refers to javascript.

In the second example that threw an error, enrol(1, 'Ryan');, there is no dot notation, therefore this is undefined.

enrol(1, 'Ryan');

This rule will typically help us identify the value of this.

So, how can we ensure this points to the right place and fix the error? We can use the 3 methods call(), apply() and bind(). Let’s start with call().

call()

The call() method allows us to directly execute a function and specifically control how the this keyword is utilised.

Firstly, let’s create a React course and observe how the call() method behaves:

'use strict';

const javascript = {
  language: 'js',
  title: 'JavaScript Crash Course',
  students: [],
  enrol(studentId, name) {
    this.students.push({
      course: this.language,
      id: studentId,
      name,
    });
  },
};

const react = {
  language: 'react',
  title: 'React Crash Course',
  students: [],
};

const enrol = javascript.enrol;

We can repurpose the enrol() function from the javascript course for the react course by using the call() method:

enrol.call(react, 1, 'Ryan');

When we print out the react object, we can observe that a new student has been added to its students array.

For the React course, it invokes enrol(1, 'Ryan') with react being bound to this. Consequently, this.language will point to react in the react object.

call() – Coding practice

We’ll now explore how we could create our own version of the call() method, and add it to the Function prototype.

We’ll name it myCall(), which accepts context and ...args. Here’s how we would use it with the React course example:

enrol.myCall(react, 1, 'Ryan');

Here is the full code for our own version of call(), which we’ll dissect line by line afterwards:

Function.prototype.myCall = function(context, ...args) {
  const uniqueId = Symbol();
  context[uniqueId] = this;
  const returnedValue = context[uniqueId](...args);
  delete context[uniqueId];

  return returnedValue;
}

Let’s walk through the code.

Function.prototype is an object and all functions inherit from it. We’re adding the myCall method to this object. The method takes a context and rest parameters. Here, the context is the object we wish to bind to the this keyword.

Consider the code snippet below:

Function.prototype.myCall = function(context, ...args) {
  console.log(context);
  console.log(this);
}

// usage
enrol.myCall(react, 1, 'Ryan');

When we print out context and this, we observe that context corresponds to the react object.

For this, we get the enrol function because this points to enrol in enrol.myCall(react, 1, 'Ryan');.

Since functions are objects too, we can add a new property, myFunc, to the context and assign this to it:

Function.prototype.myCall = function(context, ...args) {
  context.myFunc = this;
  console.log(context);
}

We can observe that myFunc has been added to the react object!

Now, we can pass arguments to myFunc and execute it:

Function.prototype.myCall = function(context, ...args) {
  context.myFunc = this;
  context.myFunc(...args);
}

// usage
enrol.myCall(react, 1, 'Ryan');

By using our myCall method, we can now add new students to the react object.

However, adding myFunc to the function prototype might result in a naming conflict if myFunc already exists. To prevent this, we can use a unique identifier for the property name, such as a Symbol():

Function.prototype.myCall = function(context, ...args) {
  const uniqueId = Symbol();
  context[uniqueId] = this;
  console.log(context);
}

With Symbol(), the context will look like below instead:

And we can invoke the enrol function with the ...args, and then remove the Symbol() property from context using the delete operator.

Function.prototype.myCall = function(context, ...args) {
  const uniqueId = Symbol();
  context[uniqueId] = this;
  context[uniqueId](...args);
  delete context[uniqueId];
}

Lastly, our enrol function doesn’t currently return anything, but let’s consider that it might do so in the future. Hence, we should cater for this in our code:

Function.prototype.myCall = function(context, ...args) {
  const uniqueId = Symbol();
  context[uniqueId] = this;
  const returnedValue = context[uniqueId](...args);
  delete context[uniqueId];

  return returnedValue;
}

We capture any returned value from the function call and then return it in our myCall function.

Great! We’ve successfully created our own version of the call() method.

apply()

The apply() method functions similarly to the call() method. The sole difference lies in how arguments are passed; apply() receives an array of parameters rather than a list separated by commas.

Using the React course example, we can use the apply() method like this:

enrol.apply(react, [1, 'Ryan']);

In modern JavaScript, we can now spread the array, allowing us to use the call() method to achieve the same result:

const enrolment = [1, 'Ryan'];
enrol.call(react, ...enrolment);

Let’s proceed to create our own version of apply(), which we will call myApply().

apply() – coding practice

For this task, we will make use of the myCall() method that we created earlier:

Function.prototype.myApply = function(context, args = []) {
  return this.myCall(context, ...args);
}

enrol.myApply(react, [1, 'Ryan']);

Inside myApply(), the this keyword represents the enrol function. As such, we can effectively call the myCall function and expand the array using the spread operator.

bind()

The bind() method operates differently than call() or apply(). Rather than invoking the function immediately, bind() returns a new function. This new function, when called, will execute the original function with a predefined context for the this keyword.

To illustrate this, consider our React course example:

const enrolReact = enrol.bind(react);
enrolReact(1, 'Ryan');

In the above code, the bind() method enables the JavaScript engine to know that when enrolReact is invoked and the execution context of the enrol function is created, the this keyword should be associated with react.

Since bind creates a new function, we can store the initial enrol function and call enrolReact with additional arguments. If we need to enrol more students, we can do so by calling enrolReact with the respective arguments:

enrolReact(2, 'Flore');
enrolReact(3, 'James');

This results in the following output:

`this` keyword in Classes

Let’s delve into another example to understand the this keyword better (the below code is modified from MDN here).

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);
const calcArea = square.calcArea;
calcArea();

Here, invoking calcArea(); on line 14 will produce an undefined error. This is due to the lack of a proper context for this. It’s exactly the same error we saw with the enrol error above. Classes are always strict mode and calcArea is just a regular function call, so this keyword inside the function will return undefined. Also with the general rule, there is no dot and nothing on the left side of dot, so we get undefined.

To resolve this, we can bind this to calcArea() within the constructor() method:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
    this.calcArea = this.calcArea.bind(this);
  }

  calcArea() {
    return this.height * this.width;
  }
}

While we’ll discuss why this solution works shortly, let’s first look at another example. If you have coded class-based React components, you might already be familiar with binding this keyword. Here is an example:

In the above example, without binding the this keyword on line 4, when we console.log(this) on line 8, we would get undefined. Why is this?

In onClick, when this.handleClick gets invoked later (at the moment, it’s just a reference), in the normal JavaScript, it would simply look like:

handleClick();

and there is no dot and nothing on the left hand side (and classes are strict-mode), and that’s why we are getting undefined.

1. Solution with bind()

By binding a function in the constructor method, we can assure that this within the method will always refer to the class instance:

this.handleClick = this.handleClick.bind(this);

So the bind method will create a copy of new function with the value of this equal to the instance of MyComponent and this.handleClick gets assigned with the new function with the correct this value.

2. Solution with arrow function

Another solution is to use the arrow function. The arrow function syntax automatically binds this to the surrounding class instance. Therefore, no explicit binding is needed in the constructor. The handleClick method with the arrow function will look like:

handleClick = () => {
  console.log(this);
}

3. Solution with arrow function in props

Alternatively, we can define an arrow function directly within the prop, which will be invoked when the button is clicked:

We have explored these three methods. Now let’s continue by writing our own myBind() polyfill.

bind() – coding practice

As you might have anticipated, the myBind function shares similarities with myCall and myApply. However, there’s one key difference – myBind will return a new function. Let’s examine the code.

Function.prototype.myBind = function(context, ...args) {
  return (...newArgs) => this.myCall(context, ...args, ...newArgs);
}

This code mirrors myApply to some extent, but rather than returning a single value, myBind returns a new function. This new function takes in newArgs as arguments and returns the value derived from myCall. The myCall method takes context, …args, and …newArgs as its arguments.

Let’s see it in action.

const enrol = javascript.enrol;
const enrolReact = enrol.myBind(react);
enrolReact(1, 'Ryan');

In the above code, enrolReact is assigned a new function with react as the context argument. We then pass 1 and Ryan as …newArgs, which invokes the myCall function.

It’s also possible to pass the arguments separately, as shown below:

const enrol = javascript.enrol;
const enrolReact = enrol.myBind(react, 1);
enrolReact('Ryan');

and the result will be the same.

In Summary

A strong grasp of how the this keyword operates is crucial when coding in JavaScript. Moreover, knowledge of these three methods – call, apply, and bind – is instrumental in managing the value of this within a function, thereby helping you tackle some of the more challenging issues concerning this. I hope this article has clarified these methods for you and offered a clear roadmap for their implementation.