Understanding these concepts will save you a lot of time debugging tricky issues in JavaScript.

JavaScript this object is one of the most commonly used concept of JavaScript. It is quite useful to understand how it works internally.

Runtime binding

In JavaScript the scope of this inside a function is determined at runtime. The scope of this change depending on how that function was called no matter how it was defined.

Whenever a JavaScript function is invoked the runtime binding of this comes into play. The this will have information such as: call-stack, parameters passed, etc.

It is important to remember that the function call-site is used determine the binding of this during the execution of a function.

In above code, the variable a is declared in global scope. When the function foo is called, this.a resolves to variable a in global scope.

In above example, the output is undefined because the variable a is not defined in global scope. This is why it is not accessible in function foo.

It is important to note that the global object is only eligible for the default binding of this. It is important that this is not attached to global object when strict mode is enabled.

It is important to remember that the strict mode of the cal-site of the function is irrelevant to the other function.

Implicit Binding

The scope of this can be implicitly defined by calling the function inside an object.

It is important to remember that if there is nesting objects, then only the closest object property value will be available in function. It all goes down to what is the call-site of the function actually.

Explicit Binding

JavaScript provides two utilities: call and apply for explicitly binding of scope of this.

Play around this and JavaScript and have fun with it. The concept around this is often asked in interviews. Have fun learning JavaScript!.

What JavaScript 10X Developers Know About this Object

Understanding these concepts will save you a lot of time debugging tricky issues in JavaSc

What will you write today?