"this" in JavaScript


Published on

What is "this" all about? Let's find out!

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

"this" in JavaScript

  1. 1. this in JavaScriptHow it really works@marthakelly
  2. 2. JavaScript is weird*“The best thing about JavaScript is its implementation of functions. Itgot almost everything right. But, as you should expect withJavaScript, it didn’t get everything right.”- Douglas Crockford, JavaScript The Good Parts* and WONDERFUL
  3. 3. Functions are first class objects// Stored in variablesvar kitten = function() {console.log(mew!);};// Stored in objectsvar kindle = {“kitten” : “Eula”,“meow” : function() {console.log(“meow!”);}};// Stored in arraysvar kindleMeow = [kindle.meow];// Passed as arguments$(“#kitten”).on(“click”, function(){console.log(“meow!”);};// Returned as valuesvar kitten = function() {var secret = “this};
  4. 4. Execution Contexts✤ Global Context✤ Function Context✤ Eval Context**handslap!!
  5. 5. Functions, interpreted✤ “Activation” Object is created✤ “Arguments” Object is created✤ Scope Chain is assigned*✤ Variable instantiation happens*✤ Value for “this” is assigned** for the sake of time, we’ll focus on these
  6. 6. Scoping (is hard)✤ Scope is defined inside the *function* context✤ Scope is not block level, it is lexical!+------------------------------+| global variable obj |+------------------------------+^|+-----------------------------+| variable obj for outer call |+-----------------------------+^|+-----------------------------+| variable obj for inner call |+-----------------------------+
  7. 7. Variable Instantiation✤ Activation Objects stores names for:✤ parameters✤ local variables✤ local functions✤ Values are UNDEFINED✤ Values are truly assigned during execution
  8. 8. // this function is written:var kitten = function() {console.log(meow);var meow = “meow!”;};// this function is interpreted:var kitten = function() {var meow = undefined;console.log(meow);meow = “meow!”;};kitten();// undefined/* Hoisting happens because ofVariable Instantiation! */Hoisting!
  9. 9. this depends on invocation✤ As an Object’s Method✤ this is the parent object✤ As a Constructor✤ this is the created object✤ As a Function Literal✤ this is the global object✤ Call/Apply✤ this is explicitly defined(based on the argument yousupply to the method)
  10. 10. this is getting weird.✤ this holds a reference to the object the function is applied to✤ this does not necessarily mean the object where it is stored
  11. 11. Context is importantvar kitkat = {name : “Kitkat”,sayName : function() {return this.name;}};var eula = {name : “Eula”,sayName : kitkat.sayName};eula.sayName();// Eula/*scope is defined inthe context itexecutes*/
  12. 12. self = this$(#kitten).click(function(){// this is a reference to the element clicked onvar self = this;$(.kittens).each(function(){// this is a reference to the current element in the loop// self is still a reference to the element clicked on});});
  13. 13. Closures✤ A Closure is created when a function returns (or, “closes over”) thevariables it had access to when it was created✤ It returns that scope property (aka, the chain of variable objects)
  14. 14. Thanks!✤ Follow me on Twitter!✤ @marthakelly