this context bind apply call

Understand JavaScript’s “this” With Clarity, and Master It

when this is used inside a function (let’s say function A) and its value is the object that invokes function A.
———————————————-
var person = {
firstName :”Foo”,
lastName :”Bar”,
fullName:function () {
console.log(this.firstName + ” ” + this.lastName ); // Foo Bar
console.log(person.firstName + ” ” + person.lastName); // Foo Bar
}
};
person.fullName(); // Foo Bar \n // Foo Bar

=============================================
Let’s call the function where this is defined the “this Function.”
this is not assigned a value until an object invokes the function where this is defined
———————————————-globals, ‘this’ is window
var firstName = “Peter”, lastName = “Ally”;
function showFullName(){ console.log(this.firstName+” “+this.lastName); }
var person = {
firstName :”Penelope”,
lastName :”Barrymore”,
showFullName:function(){ console.log(this.firstName+” “+this.lastName); }
}
showFullName (); // Peter Ally
window.showFullName (); // Peter Ally
person.showFullName (); // Penelope Barrymore
———————————————-borrow a method from another obj
var person = {
firstName :”Foo”,
lastName :”Bar”,
showFullName:function(){ console.log (this.firstName+” “+this.lastName); }
}
person.showFullName (); // Foo Bar

var anotherPerson = {
firstName :”John”,
lastName :”Doe”
};
person.showFullName.apply (anotherPerson); // John Doe
=============================================
———————————————-callback
var user = {
data:[
{name:”T. Woods”, age:37},
{name:”P. Mickelson”, age:43}
],
clickHandler:function (event) {
console.log (this);
console.log (this.data);
}
}
$ (“button”).click (
user.clickHandler // is a fn, when it is called, ‘this’ is the caller ie the button
);
// what we really want
$(“button”).click (
user.clickHandler.bind(user) // note: this is a fn!
);

=============================================
the this variable is accessible only by the function itself, not by inner functions.
so closures/innerFns cannot access the outer function’s this variable by using this
———————————————-closures
var user = {
tournament:”The Masters”,
data :[ {name:”T. Woods”, age:37}, {name:”P. Mickelson”, age:43} ],
clickHandler:function () {
// the use of this.data here is fine, because “this” refers to the user object, and data is a property on the user object.
console.log(this.tournament); // The Masters
var self=this;
this.data.forEach(function(person){ // anonymous fn passed to the forEach method
// “this” no longer refers to the user object, but is undfined (strict mode) or the Window obj
console.log (“What is This referring to? ” + this); //[object Window]
console.log (person.name + ” is playing at ” + this.tournament);
// T. Woods is playing at undefined
// P. Mickelson is playing at undefined
console.log (person.name + ” is playing at ” + self.tournament);
// T. Woods is playing at The Masters
// P. Mickelson is playing at The Masters
})
}
}
user.clickHandler();
=============================================
———————————————-ptr to a method
var obj={
x:5,
print:function(s){ console.log(s+’ ‘+this.x); }
};
var bad=obj.print;
bad(‘foo’); // foo undefined
var good=obj.print.bind(obj);
good(‘bar’); // bar 5
var doItYourself=function(s){ obj.print(s); }
doItYourself(‘aok’); // aok 5
=============================================
———————————————-borrow method
objBorrowedFrom.borrowedMethod.apply(objUsingBorrowedMethod,args)

=============================================
=============================================
=============================================

JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals