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: