Tutorials Exercises Services Get Certified Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C#
JavaScript Function bind()
‹ Previous Next ›
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
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);
Try it Yourself »
https://www.w3schools.com/js/js_function_bind.asp 02/11/2024, 10 59 AM
Page 1 of 7
:
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
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
person.display();
Try it Yourself »
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
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
setTimeout(person.display, 3000);
Try it Yourself »
https://www.w3schools.com/js/js_function_bind.asp 02/11/2024, 10 59 AM
Page 2 of 7
:
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
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);
Try it Yourself »
ADVERTISEMENT
What is this?
In JavaScript, the this keyword refers to an object.
The this keyword refers to different objects depending on how it is used:
In an object method, this refers to the object.
https://www.w3schools.com/js/js_function_bind.asp 02/11/2024, 10 59 AM
Page 3 of 7
:
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 .
See Also:
The JavaScript this Tutorial
‹ Previous Next ›
W3schools Pathfinder
Track your progress - it's free! Sign Up Log in
ADVERTISEMENT
https://www.w3schools.com/js/js_function_bind.asp 02/11/2024, 10 59 AM
Page 4 of 7
:
Recommended videos Powered by Snigel
COLOR PICKER
ADVERTISEMENT
https://www.w3schools.com/js/js_function_bind.asp 02/11/2024, 10 59 AM
Page 5 of 7
:
PLUS SPACES GET CERTIFIED FOR TEACHERS
FOR BUSINESS CONTACT US
Top Tutorials Top References
HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference
Top Examples Get Certified
HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate
FORUM ABOUT ACADEMY
W3Schools is optimized for learning and training. Examples might be simplified to improve reading
and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant
full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use,
cookie and privacy policy.
Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.
https://www.w3schools.com/js/js_function_bind.asp 02/11/2024, 10 59 AM
Page 6 of 7
:
https://www.w3schools.com/js/js_function_bind.asp 02/11/2024, 10 59 AM
Page 7 of 7
:
