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)