Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to borrow methods in JavaScript?
Method borrowing allows an object to use another object's method by temporarily setting the context using call(), apply(), or bind().
Understanding Method Borrowing
In JavaScript, methods are just functions attached to objects. When you borrow a method, you're calling a function from one object but executing it in the context of another object using this binding.
Using call() Method
The call() method invokes a function with a specified this context and individual arguments.
<!DOCTYPE html>
<html>
<head>
<title>Method Borrowing with call()</title>
</head>
<body>
<div id="output"></div>
<script>
let person1 = {
firstName: "John",
lastName: "Doe",
getFullName: function() {
return this.firstName + " " + this.lastName;
}
};
let person2 = {
firstName: "Jane",
lastName: "Smith"
};
// Borrow getFullName method from person1
let result1 = person1.getFullName();
let result2 = person1.getFullName.call(person2);
document.getElementById("output").innerHTML =
"person1.getFullName(): " + result1 + "<br>" +
"Borrowed method result: " + result2;
</script>
</body>
</html>
Using apply() Method
The apply() method works like call() but accepts arguments as an array.
<!DOCTYPE html>
<html>
<head>
<title>Method Borrowing with apply()</title>
</head>
<body>
<div id="result"></div>
<script>
let calculator = {
name: "Calculator",
add: function(a, b, c) {
return `${this.name}: ${a} + ${b} + ${c} = ${a + b + c}`;
}
};
let simpleCalc = {
name: "Simple Calculator"
};
// Using apply with array of arguments
let result = calculator.add.apply(simpleCalc, [5, 10, 15]);
document.getElementById("result").innerHTML = result;
</script>
</body>
</html>
Using bind() Method
The bind() method creates a new function with a permanently bound this context.
<!DOCTYPE html>
<html>
<head>
<title>Method Borrowing with bind()</title>
</head>
<body>
<div id="demo"></div>
<button onclick="callBoundMethod()">Call Bound Method</button>
<script>
let user = {
name: "Alice",
greet: function() {
return "Hello, I'm " + this.name;
}
};
let guest = {
name: "Bob"
};
// Create a bound method
let boundGreet = user.greet.bind(guest);
function callBoundMethod() {
document.getElementById("demo").innerHTML = boundGreet();
}
// Show initial state
document.getElementById("demo").innerHTML = "Click button to see bound method result";
</script>
</body>
</html>
Comparison of Methods
| Method | Execution | Arguments | Returns |
|---|---|---|---|
call() |
Immediate | Individual parameters | Function result |
apply() |
Immediate | Array of parameters | Function result |
bind() |
Later | Individual parameters | New bound function |
Practical Example
<!DOCTYPE html>
<html>
<head>
<title>Complete Method Borrowing Example</title>
</head>
<body>
<div id="output"></div>
<button onclick="demonstrateBorrowing()">Demonstrate Method Borrowing</button>
<script>
let animal = {
type: "Generic Animal",
makeSound: function(sound, times) {
let result = `${this.type} makes `;
for(let i = 0; i
Key Benefits
- Code Reusability: Share methods between objects without duplication
- Dynamic Context: Change the execution context of methods at runtime
- Flexibility: Create specialized versions of generic methods
Conclusion
Method borrowing in JavaScript using call(), apply(), and bind() enables flexible code reuse and dynamic context switching. Use call() for immediate execution with individual arguments, apply() for array arguments, and bind() to create permanently bound methods.
215 Views
