This is an old revision of the document!

Java Script Function Context

This

this keyword relates to the context on which it is run.
person.sayHello() ⇒ context here is person
person.spouse.sayHello(); ⇒ context is spouse
sayHello() ⇒ context is window for web browsers, globalThis for Node.js >=12 or global for Node.js < 12.

Given this example:

function-context-this.js

function sayHello() {
  console.log(this.name, this.age);
}
 
const person = {
  name: 'Alice',
  age: 30,
  sayHello: sayHello,
  spouse: {
    age: 32,
    sayHello: sayHello
  }
};
 
person.sayHello(); // Alice, 30
person.spouse.sayHello(); // undefined, 32
sayHello(); // undefined, undefined

When you call person.spouse.sayHello(), this.name evaluates to undefined since there's no name property on the spouse object, and this.age evaluates to 32.

In non-strict mode, this refers to the global object, and since there's no name or age property on the global object, both will be undefined.
So sayHello(); in non strict mode will display undefined, undefined. But in strict mode, it will throw an error.

In strict mode, this inside the sayHello function will be undefined when called without an object, leading to a TypeError when attempting to access properties on it:

"use strict";
 
function sayHello() {
  console.log(this.name, this.age);
}
 
// ... rest of the code ...
 
sayHello(); // TypeError: Cannot read properties of undefined (reading 'name')

Call, Apply, Bind

The call, apply, and bind methods in JavaScript are used to control the value of this inside a function.
They allow you to call a function with a specific context for this, and also pass arguments to the function.

These methods are particularly useful when working with functions that rely on a specific context for this, such as event handlers or methods that need to be reused with different objects.

By using call, apply, or bind, you can ensure that the function behaves correctly regardless of how it's called.

We'll use this code to show how these functions are called:

function sayHello(greeting, punctuation) {
  console.log(greeting, this.name, punctuation, this.age);
}
 
const person = {
  name: 'Alice',
  age: 30
};
 
const spouse = {
  name: 'Bob',
  age: 32
};

Call

The call method allows you to pass individual arguments after specifying the value for this.

sayHello.call(person, 'Hello', '!'); // Hello Alice ! 30
sayHello.call(spouse, 'Hi', '...'); // Hi Bob ... 32

Apply

The apply method is similar to call, but it takes an array-like object for the arguments, instead of individual arguments.

sayHello.apply(person, ['Hello', '!']); // Hello Alice ! 30
sayHello.apply(spouse, ['Hi', '...']); // Hi Bob ... 32

Bind

The bind method allows you to create a new function with a bound context for this, and you can then call that function with any arguments you like.

const sayHelloToPerson = sayHello.bind(person);
const sayHelloToSpouse = sayHello.bind(spouse);
 
sayHelloToPerson('Hello', '!'); // Hello Alice ! 30
sayHelloToSpouse('Hi', '...'); // Hi Bob ... 32

Med Java

Table of Contents