javascript scope - cs.sjsu.eduaustin/cs152-fall14/slides/cs152-day10-js_scopin… · warm up...
TRANSCRIPT
![Page 1: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/1.jpg)
C152 – Programming Language Paradigms Prof. Tom Austin, Fall 2014
JavaScript Scope
![Page 2: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/2.jpg)
Lab Solution Review (in-class)
![Page 3: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/3.jpg)
Remember that JavaScript has first-class functions.
function makeAdder(x) { return function (y) {
return x + y;
} }
var addOne = makeAdder(1);
console.log(addOne(10));
![Page 4: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/4.jpg)
Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list of adders
![Page 5: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/5.jpg)
function makeListOfAdders(lst) { var arr = []; for (var i=0; i<lst.length; i++) { var n = lst[i]; arr[i] = function(x) { return x + n; } } return arr; } var adders = makeListOfAdders([1,3,99,21]); adders.forEach(function(adder) { console.log(adder(100)); });
Prints: 121 121 121 121
![Page 6: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/6.jpg)
function makeListOfAdders(lst) { var arr = []; for (var i=0; i<lst.length; i++) { arr[i]=function(x) {return x + lst[i];} } return arr; } var adders = makeListOfAdders([1,3,99,21]); adders.forEach(function(adder) { console.log(adder(100)); });
Prints: NaN NaN NaN NaN
![Page 7: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/7.jpg)
What is going on in this wacky language???!!!
![Page 8: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/8.jpg)
JavaScript does not have block scope. So while you see: for (var i=0; i<lst.length; i++)
var n = lst[i]; the interpreter sees: var i, n;
for (i=0; i<lst.length; i++)
n = lst[i]; In JavaScript, this is known as variable hoisting.
![Page 9: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/9.jpg)
function makeListOfAdders(lst) { var i, arr = []; for (i=0; i<lst.length; i++) { (function() { var n = lst[i]; arr[i] = function(x) {return x + n;} })(); } return arr; }
Faking block scope
Function creates new scope
![Page 10: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/10.jpg)
name = "Monty"; function Rabbit(name) { this.name = name; } var r = Rabbit("Python"); console.log(r.name); // ERROR!!! console.log(name); // Prints "Python"
A JavaScript constructor
Forgot new
![Page 11: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/11.jpg)
function Rabbit(name, favFoods) { this.name = name; this.myFoods = []; favFoods.forEach(function(food) { this.myFoods.push(food); }); } var bugs = new Rabbit("Bugs", ["carrots", "lettuce", "souls"]); console.log(bugs.name); // "Bugs" console.log(bugs.myFoods); // Nothing prints
A JavaScript constructor
this refers to the scope where the function is called
![Page 12: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/12.jpg)
Execution Contexts
Scoping is determined by execution contexts, each of which is comprised of: • A variable object – Container of data for the execution context – Container for variables, function declarations, etc.
• A scope chain – The variable object plus the parent scopes
• A context object (this)
![Page 13: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/13.jpg)
Global context • Top level context. • Variable object is known as the global object. • this refers to global object Function contexts • Variable objects are known as activation objects.
An activation object includes: – Arguments passed to the function – A special arguments object – Local variables
• What is this? It's complicated…
![Page 14: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/14.jpg)
What does this refer to?
• Normal function calls: the global object • Object methods: the object • Constructers (functions called with new):
the new object being created. • Special cases: – Can be changed with call and apply functions – Can be changed with bind method (Ecmascript 5) – For an in-line event handler (on the web), refers to
the relevant DOM element
![Page 15: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/15.jpg)
x = 3; function foo(y) { console.log(this.x + y); } foo(100); foo.apply(null, [100]); // Array passed for args foo.apply({x:4}, [100]); foo.call({x:4}, 100); // No array needed var bf = foo.bind({x:5}); // Create a new function bf(100);
apply, call, and bind
![Page 16: JavaScript Scope - cs.sjsu.eduaustin/cs152-fall14/slides/CS152-Day10-JS_Scopin… · Warm up exercise: Create a makeListOfAdders function. input: a list of numbers returns: a list](https://reader033.vdocuments.net/reader033/viewer/2022052916/5a843c947f8b9a24668f0477/html5/thumbnails/16.jpg)
Lab: Intro to JavaScript
Continued from last time: In today's lab, you will explore both the functional and object-oriented aspects of JavaScript. See Canvas for details.