Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Javascript: master this

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

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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