"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);
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.
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*/
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
(function()
{
const student =
{
name :'John',
getName : function()
{
return this.name;
}
}
let theName =student.getName.bind(student);
console.log(theName());
})()
/*use bind when you have a function(not one created from a class) that requires a this, and you add the this candidate inside of bind*/