Your SlideShare is downloading. ×
"this" in JavaScript
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

"this" in JavaScript


Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. this in JavaScriptHow it really works@marthakelly
  • 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. 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. Execution Contexts✤ Global Context✤ Function Context✤ Eval Context**handslap!!
  • 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. 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. Variable Instantiation✤ Activation Objects stores names for:✤ parameters✤ local variables✤ local functions✤ Values are UNDEFINED✤ Values are truly assigned during execution
  • 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. 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. 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. Context is importantvar kitkat = {name : “Kitkat”,sayName : function() {return;}};var eula = {name : “Eula”,sayName : kitkat.sayName};eula.sayName();// Eula/*scope is defined inthe context itexecutes*/
  • 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. 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. Thanks!✤ Follow me on Twitter!✤ @marthakelly