The document discusses JavaScript functions, emphasizing their status as objects and detailing how the 'this' keyword is evaluated based on invocation patterns such as function, method, apply, and constructor. It explains exceptions for bound functions and ES6 arrow functions, highlighting their unique behaviors regarding 'this'. Additionally, it provides code examples to illustrate these concepts convincingly.

1. Master this
By Barak Drechsler

2. First things first…
functions it all about
functions

3. JS functions
• Functions are objects!
• All functions are linked to the Function.prototype
• all function receives a property called prototype which is an object.
• when invoked, functions receive 2 special variables: this, arguments

4. This
`this` keyword is a special variable,
It evaluated each time a function is executed, based on how the function have
been invoked.

5. This Evaluation
JS have 4 invocation (execution) patterns,
which allow you to execute a function.
The way a function have been invoked, will
define it ‘this’ evaluation.
• Function Invocation Pattern
• Method Invocation Pattern
• Apply Invocation Pattern
• Constructor Invocation Pattern
2 exceptions!
Bound function (via bind)
And es6 arrow functions

6. Let’s take a look at this
function add(num){
this.count += num;
}

7. Function Invocation
Applies when a function is called via simple
parenthesis call.
‘this’ - evaluation will depend on the js
mode.
Normal: ‘this’ - will be the global window
object.
Strict Mode: ‘this’ - will be the undefined.
add(1);

8. Method Invocation
Applies when a method is executed via an
object.
‘this’ - will be the invoking object.
var counter = { count : 0, add: add }
counter.add(1);

9. Apply Invocation
Applies when a function is executed via the
apply or call methods.
‘this’ - will evaluated, based on the given
parameter to the apply/call call.
Apply: (this, [ param1, param2, ... ] )
Call: (this, param1,param2, ….)
var counter = { count : 0 }
add.call(counter, 1); // output 1
add.apply(counter, [1]) // output 1
add.call({ count: 10}, 1) // output 11

10. Constructor Invocation
Applies when a function executed with the
new operator.
‘this’ - will be a new created object, that will
be returned by the function.
The new keyword is doing quite a few
things, and will not be in the scope of this
lecture.
new add(1); // output NaN

11. Bound function
We can create bound functions, via the
bind method.
Bound functions have a fixed `this` that is
defined once, and it won’t be affected by
any invocation pattern.
This can be very useful when we want to
pass a function, and keep our context.
var boundAdd = add.bind({ count: 5});
var counter = { count: 0, add: boundAdd };
boundAdd(1); // 6
counter.add(1); // 7

12. ES 6 Arrow Functions
Arrow function keeps a lexical this,
meaning they do not receive a new this for
themselves, but they are always using the
this given from the enclosing context, also,
arrow functions do not receive arguments
object.
var count = 10;
var add = (num) => this.count + num;
add(1); // 11
add.call({ count: 0 }, 1) // 11

13. Let's play
This Playground