Js interpreter interpreted
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Js interpreter interpreted

on

  • 795 views

Slide deck from Strangeloop 2013

Slide deck from Strangeloop 2013

Statistics

Views

Total Views
795
Views on SlideShare
795
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

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

Js interpreter interpreted Presentation Transcript

  • 1. The JavaScript Interpreter, Interpreted @marthakelly
  • 2. Software’s Primary Technical Imperative is _________________
  • 3. Software’s Primary Technical Imperative is managing complexity
  • 4. JavaScript is (usually) interpreted Source Code >> Parser >> AST >> Bytecode >> Machine Code
  • 5. JavaScript is...really wonderful ● (nearly) everything is an object ● functions are first class objects ○ variables ○ object methods ○ arrays ○ passed as arguments ○ returned as values
  • 6. To understand JavaScript you must understand how the JavaScript creates function objects.
  • 7. Function Objects have two stages 1. Creation a. << magic happens!>> b. determines scope and context 2. Execution a. function is run
  • 8. It’s all about (Execution) Context All JavaScript code is executed through an execution context ● Global ● Function ● Eval
  • 9. Execution Context Stacks var kitty = function() { console.log(“kitty”); } var hello = function() { console.log(“hello”); kitty(); } hello(); Stacks: [[ Function Kitty Context ]] [[ Function Hello Context ]] [[ Global Execution Context ]]
  • 10. Execution Context is an “object” var executionContext = { variableObject: {}, scopeChain: {}, this: {} }
  • 11. var executionContext = { variableObject: { arguments: { parameterName: argumentValue; }, functionName: pointer;* variableName: undefined;* } ...
  • 12. var kitten = function() { console.log(mew); var mew = 'Mew!'; } // is interpreted as var kitten = function() { var mew = undefined; console.log(mew); mew = 'Mew!'; } kitten() // undefined
  • 13. The properties created on the Variable object for local variable declarations initially assigned as undefined.
  • 14. Despite JavaScript’s C-like syntax, JavaScript does not have block level scoping. JavaScript has function scope (lexical scoping) Scope
  • 15. Scope chain functions have the scope chain of the execution context in which they are created assigned to their internal [[scope]] property. +------------------------------+ | global variable obj | +------------------------------+ ^ | +-----------------------------+ | variable obj for outer call | +-----------------------------+ ^ | +-----------------------------+ | variable obj for inner call | +-----------------------------+
  • 16. Resolving Identifiers JavaScript traverses up the scope chain, moving locally to globally. Note: Identifiers are resolved against the scope chain. ECMA 262 categorizes this as a keyword rather than an identifier.
  • 17. “this” this holds a reference to the object that the function is being applied to. This doesn't necessarily means that this will equal the object where the function is stored.
  • 18. GO AND FIND BEE AND PUPPYCAT ON YOUTUBE NOW
  • 19. var bee = {name: 'Bee'}; var puppycat = {name: 'PuppyCat'}; bee.sayHello = function(){ return "Hi, I'm " + this.name; } puppycat.sayHello = bee.sayHello;
  • 20. var bee = {name: 'Bee'}; var puppycat = {name: 'PuppyCat'}; bee.sayHello = function(){ return "Hi, I'm " + this.name; } puppycat.sayHello = bee.sayHello; // Hi, I’m PuppyCat
  • 21. “this” ● top level function ○ global object** ● method ○ the object it’s applied to ● constructor ○ the created object
  • 22. Omg, Closures A closure is created when a function remembers the variables in its scope when it was created.
  • 23. var findTheKitten = function() { var secret = “under the bed”; return { guess: function(guess) { if (guess === secret) { console.log(“YUP”); } else { console.log(“NOPE”); } } } } var game = findTheKitten(); game.guess(“in the closet”); // NOPE game.guess(“under the bed”); // YUP
  • 24. Hopefully now you know more about how JS works Thanks, everyone! @marthakelly