Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

137 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
  • Be the first to comment

  • Be the first to like this

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

×