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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

"this" in JavaScript

  • 287 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
287
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 this.name;}};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