xxxxxxxxxx
bind() returns a bound function that, when executed later, will have the correct context ("this") for calling the original function.
xxxxxxxxxx
"Variables has local and global scopes. Let's suppose that we have two variables
with the same name. One is globally defined and the other is defined inside a
function closure and we want to get the variable value which is inside the
function closure. In that case we use this bind() method.
code:
var x = 9; // this refers to global "window" object here in the browser
var person = {
x: 81, // local variable x = 81
getX: function() {
return this.x; // "this" = person , so this.x is the same as person.x
}
};
// the next line of code is the most important one (line 17)
var y = person.getX; // It will return 9, because it will call global value of x(var x=9).
var myFunc = y.bind(person); // It will return 81, because it will call local value of x, which is defined in the object called person(x=81).
y(); // return 9 (the global variable);
myFunc();" // return 81 (the loacl variable);
xxxxxxxxxx
for (i = 0; i < 5; i++)
(
(x) => {
console.log(x);
}
).bind(null, i)() // 'i' has been bound
xxxxxxxxxx
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);
xxxxxxxxxx
var myButton = {
content: 'OK',
click() {
console.log(this.content + ' clicked');
}
};
myButton.click();
var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the globalThis
var boundClick = myButton.click.bind(myButton);
boundClick(); // bound, 'this' is myButton
xxxxxxxxxx
let obj = {
name: "Abhi",
age: 28,
info: function() {
console.log(`${this.name} is ${this.age} year's old`);//template literals used here
},
};
let obj1 = {
name: "Vikash",
age: 28,
};
obj.info.bind(obj1)(); //since bind methods return a new function so
//we can directly call that function[()] without pollouting global
//space while assigning a varibale to call that function.
//Always try to make global space neat n clean ,
//dont polloute while assigning unnecessary variables.
The bind() method returns a new function, and when invoked, it has its 'this' set to a specific value.
Syntax: functionName.bind(Object to borrow values from, ...argsN)
xxxxxxxxxx
let runner = {
name: 'Runner',
run: function(speed) {
console.log(this.name + ' runs at ' + speed + ' mph.');
}
};
let flyer = {
name: 'Flyer',
fly: function(speed) {
console.log(this.name + ' flies at ' + speed + ' mph.');
}
};
// Uses values of 'flyer' instead of 'runner',
// cause of the bind(), vice versa;
let run = runner.run.bind(flyer, 20);
run(); // logs "Flyer runs at 20 mph."
// With love @kouqhar
The bind() method allows an object to borrow a method from another object without making a copy of that method.
This is known as function borrowing in JavaScript.
xxxxxxxxxx
const person = {
name: "John Smith",
getNameAndAddress: function()
{
return this.name;
}
}
const personWithoutGet = {
name: "Jerry Smithers"}
console.log(person.getName.bind(personWithoutGet);
}
/*you can think of bind() apply() and call() ALL as "stealing someone else's function to use."*/
/* victimBeingStolenFrom.functionName.call(theThief) */
/*notice the second variable personWithoutGet does not have a getName function*/
xxxxxxxxxx
var car = {
registrationNumber: "FT5142",
brand: "Benz",
displayDetails: function(){
console.log(this.registrationNumber+ " " + this.brand );
}
}
car.displayDetails();
var myCarDetails = car.displayDetails.bind(car);
myCarDetails();
xxxxxxxxxx
var persona = {
nombre: 'Franco',
apellido: 'Chequer',
getNombre: function(){
var nombreCompleto = this.nombre + ' ' + this.apellido;
return nombreCompleto;
}
}
var logNombre = function(){
console.log(this.getNombre());
}
var logNombrePersona = logNombre.bind(persona);
logNombrePersona(); //'Franco'