Master this
By Barak Drechsler
First things first…
functions it all about
functions
JS functions
• Functions are objects!
• All functions are linked to the Function.prototype
• all function receives a prope...
This
`this` keyword is a special variable,
It evaluated each time a function is executed, based on how the function have
b...
This Evaluation
JS have 4 invocation (execution) patterns,
which allow you to execute a function.
The way a function have ...
Let’s take a look at this
function add(num){
this.count += num;
}
Function Invocation
Applies when a function is called via simple
parenthesis call.
‘this’ - evaluation will depend on the ...
Method Invocation
Applies when a method is executed via an
object.
‘this’ - will be the invoking object.
var counter = { c...
Apply Invocation
Applies when a function is executed via the
apply or call methods.
‘this’ - will evaluated, based on the ...
Constructor Invocation
Applies when a function executed with the
new operator.
‘this’ - will be a new created object, that...
Bound function
We can create bound functions, via the
bind method.
Bound functions have a fixed `this` that is
defined onc...
ES 6 Arrow Functions
Arrow function keeps a lexical this,
meaning they do not receive a new this for
themselves, but they ...
Let's play
This Playground
Upcoming SlideShare
Loading in …5
×

Javascript: master this

99 views

Published on

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

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
99
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript: master this

  1. 1. Master this By Barak Drechsler
  2. 2. First things first… functions it all about functions
  3. 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. 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. 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. 6. Let’s take a look at this function add(num){ this.count += num; }
  7. 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. 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. 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. 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. 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. 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. 13. Let's play This Playground

×