This and Object Prototypess

Question 1

What does this do?

Answer 1

This mechanism provides a more elegant way of implicitly “passing along” an object reference, leading to cleaner API design and easier re-use.

Question 2

Two misconceptions about this

Answer 2

Itself: it is assumed this refers to the function itself.

Its Scope: this is that it somehow refers to the function’s scope

both are wrong

Question 3

is this runtime or author-time binding

Answer 3

runtime:
this binding has nothing to do with where a function is declared, but this is actually a binding that is made when a function is invoked, and what it references is determined entirely by the call-site where the function is called.

Question 4

what is a function call-site

Answer 4

the location in code where a function is called (not where it’s declared).

Question 5

what is a function call-stack

Answer 5

the stack of functions that have been called to get us to the current moment in execution

Question 6

Where are the call sites and call stacks of functions below?
function baz() {
    console.log( "baz" );
    bar();
}

function bar() {
    console.log( "bar" );
}

baz();

Answer 6

function baz() {
    // call-stack is: `baz`
    // so, our call-site is in the global scope
    console.log( "baz" );
    bar(); //  `bar`
    // so, our call-site is in `baz`

console.log( "bar" ); }

Question 7

why do we care about finding the call-site?

Answer 7

we care about finding the actual call-site (from the call-stack), because it’s the only thing that matters for this binding.

Question 8

4 rules for this

Answer 8

Default Binding
Implicit Binding
Explicit Binding
new Binding

Question 9

Default Binding

Answer 9

default catch-all rule when none of the other rules apply
function foo() {
console.log( this.a );
}
var a = 2;
foo(); // 2
foo() is called, this.a resolves to our global variable a. Because in this case, the default binding for this applies to the function call, and so points this at the global object. foo() would render undefined in strict mood

Question 10

Implicit Binding
function foo() {
	console.log( this.a );
}
var obj2 = {
	a: 42,
	foo: foo
};
var obj1 = {
	a: 2,
	obj2: obj2
};
obj1.obj2.foo(); // 42

Answer 10

does the call-site have a context object, also referred to as an owning or containing object.

it’s that object which should be used for the function call’s this binding.
Because obj is the this for the foo() call, this.a is synonymous with obj.a

Question 11

Explicit Binding

Answer 11

using call() or apply(): Invoking foo with explicit binding by foo.call(..) allows us to force its this to be obj
function foo() {
	console.log( this.a );
}
var obj = {
	a: 2
};
foo.call( obj ); // 2

Question 12

new Binding

function foo(a) {
	this.a = a;
}
var bar = new foo( 2 );
console.log( bar.a ); // 2

Answer 12

New key word:

1. a brand new object is created (aka, constructed) out of thin air
2. the newly constructed object is [[Prototype]]-linked
3. the newly constructed object is set as the this binding for that function call
4. unless the function returns its own alternate object, the new-invoked function call will automatically return the newly constructed object.

Question 13

two forms of objects

Answer 13

the declarative (literal) form, and the constructed form
var myObj = {key: value}; 
constructed:
var myObj = new Object();
myObj.key = value;

Question 14

6 primary types in Javascript

Answer 14

string
    number
    boolean
    null
    undefined
    object

Question 15

is null an object

Answer 15

no, null is its own primitive type.