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
Function borrowing in JavaScript.
Function borrowing in JavaScript allows objects to use methods from other objects without inheriting from them. This is achieved using call(), apply(), and bind() methods.
Understanding Function Borrowing
When an object doesn't have a particular method but needs to use it, it can "borrow" that method from another object. The borrowed method executes in the context of the borrowing object using the this keyword.
Using call() Method
The call() method invokes a function with a specific this context and individual arguments.
<!DOCTYPE html>
<html>
<head>
<title>Function Borrowing with call()</title>
</head>
<body>
<div id="result"></div>
<script>
let person1 = {
firstName: "John",
lastName: "Doe",
getFullName: function() {
return this.firstName + " " + this.lastName;
}
};
let person2 = {
firstName: "Jane",
lastName: "Smith"
};
// Borrowing getFullName method
let result = person1.getFullName.call(person2);
document.getElementById("result").innerHTML = "Borrowed method result: " + result;
</script>
</body>
</html>
Using apply() Method
The apply() method works like call() but accepts arguments as an array.
<!DOCTYPE html>
<html>
<head>
<title>Function Borrowing with apply()</title>
</head>
<body>
<div id="output"></div>
<script>
let calculator = {
name: "Calculator",
add: function(a, b, c) {
return a + b + c;
}
};
let mathHelper = {
name: "Math Helper"
};
// Using apply with arguments array
let sum = calculator.add.apply(mathHelper, [10, 20, 30]);
document.getElementById("output").innerHTML = "Sum using apply(): " + sum;
</script>
</body>
</html>
Using bind() Method
The bind() method creates a new function with a fixed this context without immediately executing it.
<!DOCTYPE html>
<html>
<head>
<title>Function Borrowing with bind()</title>
</head>
<body>
<div id="display"></div>
<button onclick="executeBinding()">Execute Bound Function</button>
<script>
let teacher = {
subject: "JavaScript",
teach: function() {
return "Teaching " + this.subject;
}
};
let student = {
subject: "Mathematics"
};
// Creating bound function
let boundTeach = teacher.teach.bind(student);
function executeBinding() {
document.getElementById("display").innerHTML = boundTeach();
}
</script>
</body>
</html>
Comparison of Methods
| Method | Execution | Arguments | Returns |
|---|---|---|---|
call() |
Immediate | Individual parameters | Function result |
apply() |
Immediate | Array of parameters | Function result |
bind() |
Deferred | Individual parameters | New bound function |
Practical Example
Here's a comprehensive example showing all three methods in action:
<!DOCTYPE html>
<html>
<head>
<title>Function Borrowing Complete Example</title>
</head>
<body>
<div id="results"></div>
<script>
let car = {
brand: "Toyota",
model: "Camry",
getInfo: function(year, color) {
return this.brand + " " + this.model + " (" + year + ", " + color + ")";
}
};
let bike = {
brand: "Honda",
model: "CBR"
};
// Using call()
let callResult = car.getInfo.call(bike, 2023, "Red");
// Using apply()
let applyResult = car.getInfo.apply(bike, [2022, "Blue"]);
// Using bind()
let boundFunction = car.getInfo.bind(bike);
let bindResult = boundFunction(2024, "Black");
document.getElementById("results").innerHTML =
"<p>Call: " + callResult + "</p>" +
"<p>Apply: " + applyResult + "</p>" +
"<p>Bind: " + bindResult + "</p>";
</script>
</body>
</html>
Conclusion
Function borrowing is a powerful JavaScript technique that promotes code reusability. Use call() for immediate execution with individual arguments, apply() for immediate execution with array arguments, and bind() when you need to create a reusable function with a fixed context.
433 Views
