Digging Deeper in Java Script Martin Kruli by

Digging Deeper in Java. Script Martin Kruliš by Martin Kruliš (v 1. 0) 2. 4. 2015 1

Revision � Values ◦ Any expression or literal produces a value ◦ There are following value types: number, string, boolean, object, function, and undefined �Operator typeof returns the type of an expression ◦ Values are automatically garbage-collected when no longer needed ◦ Some type conversions are performed automatically �"5" + 4 // is "54" �"5" * 4 // is 20 �console. log(my. Object) // converted to string by Martin Kruliš (v 1. 0) 2. 4. 2015 2

Revision � Variables ◦ Mnemonic holders for values �Rather “attachments” to values than “memory boxes” ◦ Declared by var keyword var x; var y = 1; var a, b, c; ◦ The declaration is made in the current scope �In global scope, the variables are assigned to the script environment (e. g. , object window in the browser) var x = 1; and window. x = 1; are equivalent �In a function, the variable belongs to the local scope (more details later) by Martin Kruliš (v 1. 0) 2. 4. 2015 3

Revision - Objects � Objects ◦ Objects are unordered name-value collections ◦ All members are public var my. Object = { Creates simple object with two members (foo and bar), where foo: 10, is a Number and bar is Function bar: function() { (i. e. , in some sense a method). . } Members may be added }; dynamically. my. Object. bar(); my. Object. another. Foo = 100; by Martin Kruliš (v 1. 0) 2. 4. 2015 4

Objects � Prototypes ◦ Every object may have a prototype object ◦ Prototypes substitute classes in a specific way my. Object Another. Object [[Prototype]] foo bar [[Prototype]] name print. Name() my. Object. print. Name(); my. Object. name = …; Object. prototype Searches up the prototype chain, looks for the first print. Name property Creates new member of my. Object by Martin Kruliš (v 1. 0) 2. 4. 2015 5

Objects � Constructors Constructor looks like an ordinary function var Circle = function(r) { this. radius = r; this refers to the newly created object (so it can be initialized) }; The prototype attribute is set to an empty object Circle. prototype. foo = function() { … } … so it can be easily augmented var my. Circle = new Circle(42); Creates new object and copies Circle. prototype to internal [[Prototype]] of the new object by Martin Kruliš (v 1. 0) 2. 4. 2015 6

Objects � Constructors Example Class-based Language Java. Script empty object My. Class . prototype Inheritance [[Prototype]] ne w My. Class obj My. Subclass [[Prototype]] . prototype Instatiation my. Object. prototype ne w Indirect prototyping my. Obj [[Prototype]] by Martin Kruliš (v 1. 0) 2. 4. 2015 7

Functions Revision � Functions ◦ Special “callable” objects (first-class functions) ◦ Various ways to create them function foo(args) { body } var foo = function(args) { body } var foo = new Function(args, "body"); Slight difference: declarations (1) are processed at parsing time, expressions (2) are processed at runtime ◦ Function declaration = object creation ◦ Variadic – implicitly variable arity ◦ No difference between functions and methods by Martin Kruliš (v 1. 0) 2. 4. 2015 8

Functions Revision � Function Scope of Variables var a 1; // global scope (obj. window in Browser) function foo() { var a 2; // local scope of foo() function inner. Foo() { var a 3; // local scope of inner. Foo() function inner. Inner. Foo() { // I can see a 1, a 2, and a 3 from here … a 2 = 1; } } We follow the scope chain upwards and } find the first variable of the name 'a 2'. by Martin Kruliš (v 1. 0) 2. 4. 2015 9

Execution Context � Execution Context ◦ All JS code is executed in execution context �Abstraction ~ object that holds variables �Global context is represented by the global object �E. g. , window object in the browser ◦ New context is created when function is called �Function calls shape the scope chain of exec. context 1. An activation object is created 2. Calling arguments are set in the activation object 3. Scope chain is selected from the [[Scope]] property of the function object (and becomes execution context) 4. Activation object is pushed at the front of scope chain by Martin Kruliš (v 1. 0) 2. 4. 2015 10

Functions � Scope Chain ◦ Similar to prototype chain, but… �Both reads and writes follow the chain �New (local) variables are created by var keyword var a = 1; function foo(x) { a = 2; var b = 3; c = 3; } foo(3); activation object foo [[Scope]] (global context) x b a foo() c by Martin Kruliš (v 1. 0) 2. 4. 2015 11

Functions � Closure ◦ Created functions capture current execution context �Into internal [[Scope]] property ◦ Some parts of the scope chain may become inaccessible from the current execution context �By defining nested functions and returning them out of their creation scope �The hidden part of the scope chain is still accessible from the created (nested) function ◦ The isolated scope chain is usually called closure by Martin Kruliš (v 1. 0) 2. 4. 2015 12

Functions � Closure function make() { var x = 1; return function(dx) { x += dx; alert(x); } } var f 1 = make(); var f 2 = make(); f 1(3); f 2(7); global context make [[Scope]] make() f 1() f 2() make() act. obj f 1 [[Scope]] 4 x = 1 f 1() act. obj dx = 3 make() act. obj x = 1 8 f 2 [[Scope]] f 2() act. obj dx = 7 call stack by Martin Kruliš (v 1. 0) 2. 4. 2015 13

Functions � Closure Application function create. Adder(x) { return function(y) { return x + y; } } var add 3 = create. Adder(3); var add 7 = create. Adder(7); add 3(10); add 7(10); // is 13 // is 17 The Inner function can see variable x due to scoping rules When the inner function is created, the closure captures value of x == 3 New function have a new closure where x == 7 by Martin Kruliš (v 1. 0) 2. 4. 2015 14

Functions � Closure Pitfalls All the links are created in one scope, thus sharing one closure. function create. Links() { for (var i = 1; i <= 5; ++i) { var link = document. create. Element('a'); link. onclick = function(){ alert(i); Always prints “ 5”. }; link. text. Content = "Link " + i; document. body. append. Child(link); } The value of i is 5, when the scope is closed. } document. onload = create. Links; by Martin Kruliš (v 1. 0) 2. 4. 2015 15

Augmenting Scope Chain � Pushing Object in Scope Chain ◦ with (obj) statement ◦ Given object is pushed at the top of the chain var o = { x: 1 }; Members of object o become part of the variable scope. var foo; with (o) { foo = function() { alert(x++); x is accessible here } } by Martin Kruliš (v 1. 0) 2. 4. 2015 16

Discussion by Martin Kruliš (v 1. 0) 2. 4. 2015 17