DEV Community

Lukas Gaucas
Lukas Gaucas

Posted on

JavaScript functional binding(thisExplained)

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 !

Discussion (0)