Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

JavaScript - the hard parts, Yehonatan Daniv by Mind Map: JavaScript - the hard parts,
Yehonatan Daniv
5.0 stars - 2 reviews range from 0 to 5

JavaScript - the hard parts, Yehonatan Daniv


namespace of all things defined

JS engine goes over names to resolve them

scope is created once we define it

e.g., function

internally, engine creates a scope

allocates memory

when the function is called, the scope is initialized

nested scopes create scope chain

that's what the engine traverses when doing resolution

{} forms a scope in other languages, but not in JS

scopes & scope chains


Variable Object, VO, holds all *identifiers* declared in its context

For the global object it's window

there's a scope created when going over the definition, & there's an activation object when the function is invoked, Execution context, including parameters & context

Execution context


VO + [[scope]] + the "this" value

Forms a closure, the execution context state is kept alive with the function


(see diagrams on slides)


JS is as ugly as PHP, in the sense that there isn't much difference between local & global variables, It's very easy to override global variables when defining local variables, & vice versa, define global variables in local scopes by mistake


Yehonatan Daniv

Django & Client-side developer

tag line

how I learned to stop worrying & love JS

the talk is on the high-level, not about internals

which are dry & boring

The parts


a property of the EC

immutable, can't do:, this = ...

a reference to a JS object or to null

assigned by the caller when EC is created & entered

determined by the current form of call expression, engine checks what's left to the (), reference type, base object of referenced object, else, null, examples, function foo() { alert(this); } foo();, this is global, foo.prototype.constructor();, this is foo.prototype, dynamic binding:, Untitled, in JS there are 9 types, ..

call expressions, examples, Untitled, ...

determination, rule of thumb, if a function is passed as a parameter, "this" will change to the base object of the invoker

to change that, use bind, since ES5, it's in Function.prototype, using the trick, Untitled, when we have a scope within scope, or, use global objects & always invoke methods of these global objects, never using "this"

prorotype & the __proto__ chain

The "OOP" in JS

history, JS was developed in about 2 weeks, was based on several paradigms, Java, Python, Lisp &c

OOP in JS, Instead of class -> Object, Instead of instance -> Object, Instead of super -> __proto__, implemented inly in some browsers, Chrome & FF, Resig (JQuery) wrote something that emulates it

[[prototype]], Every Object in JS has an internal, accessible & Immutable property - [[prototype]], For Mozilla, __proto__, For others, ..., Eince ES5, Object.create, Object.getProtoytpeOf

functions have an attribute called prototype

Prototype chains, resolution chain is like scope, Object.property_name, Found?, Not found?, Object.__proto__.property_name, Found?, Not found?, ...

ES3 syle, Untitled, enables us to create instances with given object as prototype

ES5 style, Untitled, Untitled


ES5 (EcmaScript) supported in?, IE >= 9, FF >= 3.5, Chrome, Safari >= 5.1

JS will be killed next week by Google's Dart



document, reference to the DOM, contained in window, this isn't JS, it's a reference to the HTML DOM elements


window, the global scope (browser-based JS), implemented as JS object, everything defined is there

local, either, function, every time the the function word appears, with, this is evil & removed in ES5 Strict mode, Crokford:, breaks lexical scope