xxxxxxxxxx
var car = {
registrationNumber: "FT5142",
brand: "Benz",
}
function displayDetails(ownerName){
console.log(ownerName + ", this is your car: " + this.registrationNumber+ " " + this.brand );
}
// car.displayDetails();
displayDetails.apply( car, ["Raymund"]);
displayDetails.call(car, "Raymund");
xxxxxxxxxx
* call apply and bind
- This concept is called function borrowing
- We can borrow function from the other objects
and use the data with the other object.
-> Call invokes the function and allows you to pass in arguments
one by one.
-> Apply invokes the function and allows you to pass in arguments
as an array.
-> Bind returns a new function, allowing you to pass in a
this array and any number of arguments.
let myName = {
firstname: "Abhishek",
lastname: "Bhavsar",
}
let printFullName = function (hometown, state) {
console.log("=>>>>>>>", this.firstname + " " + this.lastname + "from" + hometown + "," + state)
}
// call
printFullName.call(myName, "Ahmedabad", "Gujrat");
let name2 = {
firstname: "Sachin",
lastname: "Tendulkar",
}
// function borrowing
printFullName.call(name2, "Mumbai", "Maharashtra");
// apply
printFullName.apply(name2, ["Mumbai", "Maharashtra"]);
// bind method
let printMyName = printFullName.bind(name2, "Mumbai", "Maharashtra");
console.log(printMyName);
printMyName();
xxxxxxxxxx
// ----------------------
// Traditional Example
// ----------------------
// A simplistic object with its very own "this".
var obj = {
num: 100
}
// Setting "num" on window to show how it is NOT used.
window.num = 2020; // yikes!
// A simple traditional function to operate on "this"
var add = function (a, b, c) {
return this.num + a + b + c;
}
// call
var result = add.call(obj, 1, 2, 3) // establishing the scope as "obj"
console.log(result) // result 106
// apply
const arr = [1, 2, 3]
var result = add.apply(obj, arr) // establishing the scope as "obj"
console.log(result) // result 106
// bind
var result = add.bind(obj) // establishing the scope as "obj"
console.log(result(1, 2, 3)) // result 106
xxxxxxxxxx
function Car(type, fuelType){
this.type = type;
this.fuelType = fuelType;
}
function setBrand(brand){
Car.apply(this, ["convertible", "petrol"]); //Syntax with array literal
this.brand = brand;
console.log(`Car details = `, this);
}
function definePrice(price){
Car.apply(this, new Array("convertible", "diesel")); //Syntax with array object construction
this.price = price;
console.log(`Car details = `, this);
}
const newBrand = new setBrand('Brand1');
const newCarPrice = new definePrice(100000);
xxxxxxxxxx
1. call Method:
The call method is used to invoke a function with a specific this value and a list of arguments passed individually.
It takes the this value as its first argument, followed by any additional arguments you want to pass to the function.
function greet(message) {
console.log(`${message}, ${this.name}`);
}
const person = { name: "Alice" };
greet.call(person, "Hello"); // Output: Hello, Alice
2.apply Method:
Similar to call, the apply method is used to invoke a function with a specific this value and a list of arguments, but the arguments are passed as an array.
This can be useful when you have an array of arguments or need to dynamically pass arguments.
function greet(message) {
console.log(`${message}, ${this.name}`);
}
const person = { name: "Alice" };
const args = ["Hello"];
greet.apply(person, args); // Output: Hello, Alice
3.bind Method:
The bind method is used to create a new function that, when invoked, has a fixed this value and can also pre-set some initial arguments.
Unlike call and apply, bind doesn't immediately invoke the function but returns a new function with the bound context and arguments.
function greet(message) {
console.log(`${message}, ${this.name}`);
}
const person = { name: "Alice" };
const greetPerson = greet.bind(person);
greetPerson("Hello"); // Output: Hello, Alice