Example 1 of binding by using .call() with objects :
// hereby var deliberately emphasizes Global scope which we are currently in :
// type window.dog.type yourself to see what's being logged
var dog = {
type: "dog"
};
var cat = {
type: "cat",
explains: function () {
/* hereby this.type thinks as if "window.type", where as...
...window has no of such method . Well it thinks wrong way */
return "I am not a" + this.type;
}
}
cat.explains.call(dog); // "cat explains to the dog" returns "I am not a dog"
Example 2 of binding by using .call() with classes :
If ES5 classes used, method .call() comes in hand for as extensibility behaviour
// This is powered by MDN (2 ed.)
// Parent class blueprint
function Product(name, price) {
this.name = name;
this.price = price;
}
// Child class blueprint that extends Parent through keyword "this" :
function Food(name, price) {
Product.call(this, name, price); // hereby keyword "this" states : Food extends Product
this.category = 'food'; // a class of Food self property
}
console.log(new Food('cheese', 5).name); // expected output : "cheese"
console.log(new Food('cheese', 5).price); // expected output : 5
console.log(new Food('cheese', 5).category); // "food"
Example 1 of binding by using .bind() with objects :
If you study this carefully, you should get the point of .bind() in whole!
/*var*/this.x = 9; // hereby 'this' refers to global 'window' object in a browser
const module = {
x: 81,
getX: function() { return this.x; }
};
module.getX(); // returns 81
// Even if we invoke method binding inner "this" through module as one entity
let retrieveXrightNow = module.getX(); // ^retrieveXrightNow is one entity!
console.log(retrieveXrightNow); // it works : returns 81
/* However, reference of retrieveX for a later invocation of module.getX would...
...not work if retrieveX() later in the future, unless the case of...
...when it does search prop / method within window object and does find one
...as an example of such case shown below in the code :
*/
let retrieveX = module.getX; // ^retrieveX is no more of one entity!
retrieveX(); /* expected output : undefined ; fortunately it returned 9 ;
because we declared this.x = 9 GLOBALLY (see at the very top of the code)
If declared within const module = { x : 9, ...} , it would return undefined
NOTICE! : In JavaScript, keyword THIS is bound during function invocation ! It
may not be comprehended in first place, but when it did you're the boss!
IN CASE OF : const module = { x : 9, ...} SOLUTION is to bind it's LOCAL SCOPE
It's like to say "Forget Global scope, let's do some own (local scope) business"
Solution to the issue shown below :
*/
const bRetrieveX = module.getX.bind(module); // by this we do state :
/* "Please, do attach "this" keyword of local scope specifically of module & ...
...say to window object 'Hey, Window, mind your business, okay?!'
*/
bRetrieveX(); // returns 81
Re-cap
If we examined the code snippet above thoroughly we presumably noticed very important thing : whenever we do try to invoke function as reference of variable the function we attached to without brackets() , we actually kinda of lost "this" of method's object as reference to local scope which within the method of specific object does reside. Hereby object might be a function object i.e. class, and the class function i.e. method – it does not matter as the expected behaviour would be the same . If it's still far away of being comprehended, think of it as either reference *through one entity * e.g.
let retrieveXrightNow = module.getX()
i.e. as if in-place invoked reference or *not through one entity * e.g.
let retrieveX = module.getX;
i.e. as not-in-place (for-the-later) reference (variable) invocation, which is the case when reference has no more of keyword "this" attached to i.e. we lost "this" somewhere in a while.
Example 2 of binding by using .bind() with classes :
Independent-classes-binding
If any typos found and (or) suggestions could be made, please leave it in the comment section below . Thank you and see you in the next one !
Top comments (0)