"this" in JavaScript

  • 270 views
Uploaded on

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

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

More 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
270
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