Function Bind

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

Function Bind

Function Borrowing

Using the bind() method, an object can borrow a method from another object.

The below example creates 2 objects (person and member).

The member object borrows the full name method from the person object.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Function bind()</h2>

<p>This example creates 2 objects (person and member).</p>

<p>The member object borrows the fullname method from person:</p>

<p id=”demo”></p>

<script>

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);

document.getElementById(“demo”).innerHTML = fullName();

</script>

</body>

</html>

Output

JavaScript Function bind()

This example creates 2 objects (person and member).

The member object borrows the fullname method from person:

Hege Nilsen

Preserving this

There are times when the bind() method has to be used to avoid losing this.

In the below example, the person object has a display method. In the display method, this refers to the person object:

Example

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Function bind()</h1>

<p>In this example, the person object has a display method:</p>

<p id=”demo”></p>

<script>

const person = {

  firstName:”John”,

  lastName: “Doe”,

  display: function() {

    let x = document.getElementById(“demo”);

    x.innerHTML = this.firstName + ” ” + this.lastName;

  }

}

person.display();

</script>

</body>

</html>

Output

JavaScript Function bind()

In this example, the person object has a display method:

John Doe

When a function is used as a callback, this is lost.

This example tries to display the person’s name after 3 seconds, but it will display undefined instead.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Function bind()</h2>

<p>This example will try to display a person name after 3 seconds.</p>

<p id=”demo”></p>

<script>

const person = {

  firstName:”John”,

  lastName: “Doe”,

  display: function() {

    let x = document.getElementById(“demo”);

    x.innerHTML = this.firstName + ” ” + this.lastName;

  }

}

setTimeout(person.display, 3000);

</script>

</body>

</html>

Output

JavaScript Function bind()

This example will try to display a person name after 3 seconds.

The bind() method solves this problem.

In the following example, the bind() method binds person. display to person.

This example will display the person name after 3 seconds.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Function bind()</h2>

<p>This example will display a person name after 3 seconds:</p>

<p id=”demo”></p>

<script>

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);

</script>

</body>

</html>

Output

JavaScript Function bind()

This example will display a person name after 3 seconds: