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 !

Top comments (0)

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: