• Save
"this" in JavaScript
Upcoming SlideShare
Loading in...5
×
 

"this" in JavaScript

on

  • 500 views

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

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

Statistics

Views

Total Views
500
Views on SlideShare
454
Embed Views
46

Actions

Likes
1
Downloads
0
Comments
0

3 Embeds 46

https://twitter.com 41
http://eventifier.co 4
http://waffleme.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

"this" in JavaScript "this" in JavaScript Presentation Transcript

  • this in JavaScriptHow it really works@marthakelly
  • 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
  • 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};
  • Execution Contexts✤ Global Context✤ Function Context✤ Eval Context**handslap!!
  • 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
  • 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 |+-----------------------------+
  • Variable Instantiation✤ Activation Objects stores names for:✤ parameters✤ local variables✤ local functions✤ Values are UNDEFINED✤ Values are truly assigned during execution
  • // 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!
  • 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)
  • 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
  • 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*/
  • 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});});
  • 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)
  • Thanks!✤ Follow me on Twitter!✤ @marthakelly