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
"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.
xxxxxxxxxx
bind() returns a bound function that, when executed later, will have the correct context ("this") for calling the original function.
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 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'