this & Object Prototypes chapter 2

YDKJSY this & Object Prototypes

Chapter 2 : `this` All Makes Sense Now!

this is a binding made for each function invocation, based entirely on its call-site (how the function is called).

Call-Site

Finding the call-site is generally: "go locate where a function is called from".

What's important is to think about the call-stack (the stack of functions that have been called to get us to the current moment in execution). The call-site we care about is in the invocation before the currently executing function.

call-stack and call-site

Take care when analyzing code to find the actual call-site (from the call-stack), because it's the only thing that matters for this binding.

Nothing But Rules

We turn our attention now to how the call-site determines where this will point during the execution of a function.

You must inspect the call-site and determine which of 4 rules applies.

1. Default Binding

Think of this this rule as the default catch-all rule when none of the other rules apply.

standalone function invocation

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

var a = 2;
foo(); // 2

Variables declared in the global scope are synonymous with global-object properties of the same name.

We see that when foo() is called, 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.

2. Implicit Binding

Another rule to consider is: does the call-site have a context object.

consider

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

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

obj.foo(); // 2

At the point that foo() is called, it's preceded by an object reference to obj. When there is a context object for a function reference, the implicit binding rule says that 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.

3. Explicit Binding

What if you want to force a function call to use a particular object for the this binding, without putting a property function reference on the object?

Functions have call(..) and apply(..) methods.

They both take, as their first parameter, an object to use for the this, and then invoke the function with that this specified.

consider

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

var obj = {
a: 2
};

foo.call( obj ); // 2

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

Hard Binding

Since hard binding is such a common pattern, it's provided with a built-in utility as of ES5: Function.prototype.bind, and it's used...

like this

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

API call "contexts"

Many new built-in functions in the JavaScript language and host environment, provide an optional parameter, usually called "context", which is designed as a work-around for you not having to use bind(..) to ensure your callback function uses a particular this.

for instance

function foo(el) {
console.log( el, this.id );
}
var obj = {
id: "awesome"
};

// use `obj` as `this` for `foo(..)` calls

[1, 2, 3].forEach( foo, obj ); // 1 awesome 2 awesome 3 awesome

4. `new` binding

When a function is invoked with new in front of it, otherwise known as a constructor call, the following things are done automatically:

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.

consider

function foo(a) {
this.a = a;
}

var bar = new foo( 2 );
console.log( bar.a ); // 2

By calling foo(..) with new in front of it, we've constructed a new object and set that new object as the this for the call of foo(..).

Determining `this`

We can summarize the rules for determining this from a function call's call-site, in their order of precedence. Ask these questions in this order, and stop when the first rule applies.

Is the function called with new (new binding)? If so, this is the newly constructed object.
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.
Is the function called with a context (implicit binding), otherwise known as an owning or containing object? If so, this is that context object.
Otherwise, default the this (default binding). If in strict mode, pick undefined, otherwise pick the global object.

YDKJSY this & Object Prototypes chapter 2 this All Makes Sense Now!