This

Question 1

what is the output?
function foo(num) {
	console.log( "foo: " + num );
	this.count++;
}

foo.count = 0;

var i;

for (i=0; i<10; i++) {
	if (i > 5) {
		foo( i );
	}
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9

console.log( foo.count );

Answer 1

Answer:
0

Though count is added to the function, the “this reference” is not actually referring to the function at all.
Though the names are same, the root object differs.

In other words, this is bound to from where the function is called.

The above issue can be fixed by calling

foo.call( foo, i );

Now we are making this refer to the function itself

Question 2

What is the output of this function?

function foo() {
	var a = 2;
	this.bar();
}

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

foo();

Answer 2

undefined.

cant access the variable a defined inside the foo() function lexically from function bar

Question 3

What kind of binding is “this”?

Answer 3

this is runtime binding, not author time binding.
It is contextual based on the conditions of the function’s invocation.
this binding has nothing to do with where a function is declared, but has instead everything to do with the manner in which the function is called

Question 4

what is execution context of a function?

Answer 4

When a function is invoked, an activation record, otherwise known as an execution context, is created. This record contains information about where the function was called from (the call-stack), how the function was invoked, what parameters were passed, etc. One of the properties of this record is the this reference which will be used for the duration of that function’s execution.

Question 5

What is the output?
function foo() {
console.log( this.a );
}

var a = 2;

foo();

Answer 5

2

this.a resolves to our global variable a. Why? Because in this case, the default binding for this applies to the function call, and so points this at the global object.

if strict mode is enabled then “this” will be undefined

Question 6

what is the output?
function foo() {
console.log( this.a );
}

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

obj.foo();

Answer 6

2

the call-site uses the obj context to reference the function, so you could say that the obj object “owns” or “contains” the function reference at the time the function is called.

Question 7

what is the output?
function foo() {
console.log( this.a );
}

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

var bar = obj.foo;

var a = “oops, global”;

bar();

Answer 7

“oops global”

Even though bar appears to be a reference to obj.foo, in fact, it’s really just another reference to foo itself. Moreover, the call-site is what matters, and the call-site is bar(), which is a plain, un-decorated call and thus the default binding applies.

Question 8

what is the output?
function foo() {
console.log( this.a );
}

function doFoo(fn) {
	fn(); 
}

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

var a = “oops, global”;

doFoo( obj.foo );

Answer 8

oops, global

Question 9

what is the output?
function foo() {
console.log( this.a );
}

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

var a = "oops, global"; 
setTimeout( obj.foo, 100 );

Answer 9

oops global

Question 10

what are the two language supported functions, which every function has access to?

Answer 10

call and bind

Question 11

what is the output?
function foo() {
console.log( this.a );
}

var obj = {
	a: 2
};

foo.call( obj );

Answer 11

2

Invoking foo with explicit binding by foo.call(..) allows us to force its this to be obj.

Question 12

How to use bind to hard code this

Answer 12

function foo(something) {
	console.log( this.a, something );
	return this.a + something;
}

var obj = {
	a: 2
};

var bar = foo.bind( obj );

var b = bar( 3 ); // 2 3
console.log( b ); // 5

bind(..) returns a new function that is hard-coded to call the original function with the this context set as you specified.

Question 13

What are constructors in Javascript?

Answer 13

In JS, constructors are just functions that happen to be called with the new operator in front of them. They are not attached to classes, nor are they instantiating a class. They are not even special types of functions. They’re just regular functions that are, in essence, hijacked by the use of new in their invocation.

Question 14

what happens when a function is called with new keyword in front of it?

Answer 14

a brand new object is created (aka, constructed) out of thin air

the newly constructed object is [[Prototype]]-linked

the newly constructed object is set as the “this” binding for that function call
unless the function returns its own alternate object, the new-invoked function call will automatically return the newly constructed object.

Question 15

What is the output?
function foo() {
console.log( this.a );
}

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

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

obj1. foo();
obj2. foo();

obj1. foo.call( obj2 );
obj2. foo.call( obj1 );

Answer 15

2
3
3
2

Explicit binding has more precedence over the implicit binding

Question 16

the rules of “this” binding for normal functions

Answer 16

1)
Is the function called with new (new binding)? If so, this is the newly constructed object.

var bar = new foo()

2)Is the function called with call or apply (explicit binding), even hidden inside a bind hard binding? If so, this is the explicitly specified object.

var bar = foo.call( obj2 )

3)Is the function called with a context (implicit binding), otherwise known as an owning or containing object? If so, this is that context object.

var bar = obj1.foo()

4)Otherwise, default the this (default binding). If in strict mode, pick undefined, otherwise pick the global object.

var bar = foo()

Question 17

Rules of This binding for Arrow operator or fat functions

Answer 17

nstead of using the four standard this rules, arrow-functions adopt the this binding from the enclosing (function or global) scope.

Question 18

What is the output
function foo() {
	return (a) => {
		console.log( this.a );
	};
}

var obj1 = {
	a: 2
};

var obj2 = {
	a: 3
};

var bar = foo.call( obj1 );
bar.call( obj2 );

Answer 18

Output:2

The arrow-function created in foo() lexically captures whatever foo()s this is at its call-time. Since foo() was this-bound to obj1, bar (a reference to the returned arrow-function) will also be this-bound to obj1