This site is mobile accessible. Press the "Tap Here" button to use a different font-size.

Smartphone icons created by Freepik - Flaticon

11.6 JS Function Bind

Function Borrowing

With the bind() method, an object can borrow a method from another object.
The example below creates 2 objects (person and member).
The member object borrows the fullname method from the person object:

Example 1: JS Function bind() part 1

const person = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

Preserving this

Sometimes the bind() method has to be used to prevent losing this.
In the following example, the person object has a display method. In the display method, this refers to the person object:

Example 2: JS Function bind() part 2

const person = {
  firstName:"John",
  lastName: "Doe",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}

person.display();

When a function is used as a callback, this is lost.
This example will try to display the person name after 3 seconds, but it will display undefined instead:

Example 3: JS Function bind() part 3

const person = {
  firstName:"John",
  lastName: "Doe",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}

setTimeout(person.display, 3000);

The bind() method solves this problem.
In the following example, the bind() method is used to bind person.display to person.
This example will display the person name after 3 seconds:

Example 4: JS Function bind() part 4

const person = {
  firstName:"John",
  lastName: "Doe",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}

let display = person.display.bind(person);
setTimeout(display, 3000);

What is this?

In JavaScript, the this keyword refers to an object.
Which object depends on how this is being invoked (used or called).
The this keyword refers to different objects depending on how it is used:

In an object method, this refers to the object.

Alone, this refers to the global object.

In a function, this refers to the global object.

In a function, in strict mode, this is undefined.

In an event, this refers to the element that received the event.

Methods like call(), apply(), and bind() can refer this to any object.

Note
this is not a variable. It is a keyword. You cannot change the value of this.

JavaScript Fundamentals course home
Module 11. JS Functions

Navigate this module

Eventually the navigation links, above, will be replaced by these << (previous) and >> (next) buttons below.

JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon

Example files created in this module:
JS Functions - Function Declaration JS Functions - Function Expressions part 1 JS Functions - Function Expressions part 2 JS Functions - The Function() Constructor part 1 JS Functions - The Function() Constructor part 2 JS Functions - Self-Invoking Functions JS Functions - Functions Can Be Used as Values part 1 JS Functions - Functions Can Be Used as Values part 2 JS Functions are Objects part 1 JS Functions are Objects part 2 JS Arrow Functions part 1 JS Arrow Functions part 2 JS Default Parameters JS Functions - Default Parameter Values JS functions - The Rest Parameter JS Functions - Finding the largest number JS Functions - Sum of all arguments JS Functions - Invoking a Function as a Function part 1 JS Functions - Invoking a Function as a Function part 2 JS Functions - The Global Object JS Functions - Invoking a Function as a Method part 1 JS Functions - Invoking a Function as a Method part 2 JS Functions - Invoking a Function with a Function Constructor JS Functions - All Functions are Methods JS Functions - The JavaScript call() Method part 1 JS Functions - The JavaScript call() Method part 2 JS Functions - The JavaScript call() Method with Arguments JS Functions - The JavaScript apply() Method JS Functions - The apply() Method with Arguments JS Functions - The call() Method with Arguments JS Math.max() part 1 JS Math.max() part 2 JS Math.max() part 3 JS Math.max() part 4 JS Math.max() part 5 JS Function bind() part 1 JS Function bind() part 2 JS Function bind() part 3 JS Function bind() part 4 JS Functions - Global Variables part 1 JS Functions - Global Variables part 2 JS Functions - Global Variables part 3 JS Function Closures - Counter Dilemma part 1 JS Function Closures - Counter Dilemma part 2 JS Function Closures - Counter Dilemma part 3 JS Function Closures - Nested Functions JS Closures