An overview of "this" keyword in javascript, on this presentation I discuss how "this" is evaluated for a better understanding of JS language.

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