Js interpreter interpreted
1 like1,711 views
This document summarizes key aspects of how JavaScript works behind the scenes. It explains that JavaScript code is executed through an execution context stack, with each function call creating a new context on the stack. Each context contains a variable object and scope chain. It also discusses how function scope is determined by the scope chain and how 'this' is determined based on how a function is called. The document concludes by explaining closures and how functions can remember variables from the scope they were defined in.
![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 ]]](https://image.slidesharecdn.com/jsinterpreterinterpreted-130930121031-phpapp02/85/Js-interpreter-interpreted-9-320.jpg)
![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 |
+-----------------------------+](https://image.slidesharecdn.com/jsinterpreterinterpreted-130930121031-phpapp02/85/Js-interpreter-interpreted-15-320.jpg)
Js interpreter interpreted
- 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