• this is a binding made for each function invocation, based entirely on its call-site (how the function is called);
• There are four rules for this:
  • Default Binding
  • Implicit Binding
  • Explicit Binding
  • new Binding
• Default Binding: Before proceeding with it, we need to understand that the variables declared in the global scope using var is synonymous with global-object properties of the same name. They are not copies of each other but are each other. In default binding, this gets bound with the global scope. Note: Default binding is only applied when code is not executed in strict mode.

function foo() {
	console.log( this.a );
}

var a = 2;

foo(); // 2            ===> Default Binding

• Implicit Binding: ****This is observed when the call site has a context object as given below.

function foo() {
	console.log( this.a );
}

var obj = {
	a: 2,
	foo: foo
}

obj.foo(); // 2

And further note that only the top/last level of an object property reference chain matters to the call site.

function foo() {
	console.log( this.a );
}

var obj2 = {
	a: 42,
	foo: foo
};

var obj1 = {
	a: 2,
	obj2: obj2
};

obj1.obj2.foo(); // 42

Sometimes implicitly bound functions lose the binding falling back to the default binding. This happens because in the below example obj.foo is in fact a reference to foo itself. Thus we are basically calling foo with global scope binding.

function foo() {
	console.log( this.a );
}

var obj = {
	a: 2,
	foo: foo
}

var bar = obj.foo;

var a = "oops, global"; // `a` also property on global object

bar(); // "oops, global"

• Explicit Binding: Unlike implicit binding, we directly mention what should be used for this binding. We can achieve this using call(..) and apply(..) methods.

function foo() {
	console.log( this.a );
}

var obj = {
	a: 2
}

// passing the object to be used for `*this*` explicitly
foo.call(obj); // 2
// foo.apply(obj); would behave the same

• new Binding: In this kind of binding, if we invoke the function with new keyword then this is bound to the variable which is being assigned look at the example below for understanding.

function foo(a) {
	this.a = "hello";
	this.b = "world";
}

var bar = new foo();
// `this` has been bound to bar here
console.log(bar.a); // hello
console.log(bar.b); // world

• Priority among these types of binding is as:

<aside> 👉🏼 Default Binding < Implicit Binding < Explicit Binding < new binding

</aside>

• Binding Exceptions are there, in which a different binding is intended but we end up with binding behaviour from the default binding rule.
• Ignored this If we pass null or undefined as a this binding parameter to call, apply, or bind, those values are effectively ignore and instead default binding rule applies.

function foo() {
	console.log(this.a);
}

var a = 2;

foo.call(null); // 2