Javascript: The four rules of {this}.
Tags: javascript
Published: 2021-02-20 19:54:37

---
title: Javascript: The four rules of {this}.
published: true
description: What rules determine the order of precedence where this points to when a function is executed?
tags: javascript 
//cover_image: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxh9iiwbfiw3di32td8t.png)
---

*Firstly, this article is written with reference to a chapter from Kyle Simpson's great book You Don't Know JS: this & Object Prototypes. It is an incredible resource for anyone looking to build a deeper understanding of Javascript.*

What rules determine the order of precedence where this points to when a function is executed?

There are four rules that determine the order of precedence on where this points to during function execution:

• Default Binding
• Implicit Binding
• Explicit Binding
• Hard Binding

***Default Binding :***


```function js(){
 console.log(this.binding);
}
var binding = 'default binding';
js(); // default binding```



Breaking down our snippet above and understanding how our call-site determines where this points to when function js(){...} is executed, firstly, function js(){…} is our call-stack which holds console.log(this.binding); and the call-site for our function is js(); which is located on the last line of the snippet which is the point from which the function is called. furthermore, our variable var binding = 'default binding'; is declared in the global scope.


***Implicit Binding:***


```function properties(){
 console.log(this.binding);
}
var object = {
 binding: 'implicit binding',
 properties: properties
};
object.properties(); // implicit binding```


If you've worked with apollo resolvers or the react context API this second rule will give some deeper clarity on how they work through javascript.

breaking down the above snippet, our call-stack is `function properties(){...}`

which holds our this.binding binding, our call-site is object.properties();.

however, what differentiates this rule to the default binding is in the manner in which our call-site is declared.
The implicit rule can be determined if our call-site has a context object, `function properties(){...};` is declared in the same fashion as our default binding from our first example, however, our call-site references object when calling a function, object.properties();.

At the point at which `properties();` is called it is prefixed with `var object = {...}`, which contains the value on execution.

reference: As Kyle Simpson states in his book You Don't Know JS: this & Object Prototypes :

*"When there is a context object for a function reference, the implicit binding rule says that it's object which should be used for the function call's this binding."*

*"With implicit binding as we just saw, we had to mutate the object in question to include a reference on itself to the function, and use this property function reference to `indirectly(implicitly)` bind this to the object."*

***Explicit Binding:***

```function properties(){
 console.log(this.binding);
}
var object = {
 binding : 'explicit binding'
};
properties.call(object); //explicit binding
or
properties.apply(object); //explicit binding
// call or apply produce the same result.```

Instead of including an implicit function reference inside `var object = {...}` and prefixing it to the call-site, we can explicitly call the function with a built-in utility `call()` and `apply()`, the function `properties(){...}` is the call-stack, however, our call-site uses the built-in utility to execute the function explicitly. It is important to note that `call()` and `apply()` result in the same outcome unless additional parameters are passed to them.


***Hard Binding:***

`function properties(){
 console.log(this.binding);
}
var object = {
 binding: 'hard binding'
};
var hardBindedPropertiesToObject = function(){
 properties.call(object);
}
hardBindedPropertiesToObject(); // hard binding`

With respect to the hard binding snippet above, we create a function `var hardBindedPropertiesToObject= function(){//call(object)}` which calls the call-stack with `var object = {...}` which points towards this.

reference: As Kyle Simpson states in his book You Don't Know JS: this & Object Prototypes :

*"This binding is both explicit and strong, so we call it hard binding."*

Another thing to note is that the hard binding pattern has its own built-in utility `Function.prototype.bind()`.

consider:


```const module = {
 x: 42,
 getX: function() {
 return this.x;
 }
};
const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42```

[source MDN developer.mozilla.org states:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind)

To conclude, here are the 4 rules of this , I would highly recommend reading the you dont know js book series by Kyle Simpson. [His books](https://github.com/trackmystories/You-Dont-Know-JS) cover all the aspects of javascript that can enable any developer to gain proficiency in the language.